|
CSS 能够说是所有Web应用的“脸面”，因此呢用好CSS这门利器，能够提高网站的颜值。而CSS中水平居中和垂直居中是咱们学习和工作中经常用到的，因此我在这儿和大众聊一聊居中的几种实现方式。
1、水平居中文字和照片等行内元素想实现水平居中，能够在父容器上添加text-align属性，就可实现容器内部的文字和照片居中水平对齐#parent {
text-align: center;
}
固定体积的块级容器想实现水平居中对齐，可采用如下方法
方法1、运用margin: auto;
#parent {
bac公斤round-color: lightgrey;
width: 300px;
height: 300px;
}
#child {
bac公斤round-color: black;
width: 160px;
height: 160px;
margin: 0px auto;
}
margin: auto属性方法2、运用css3的calc属性
#parent {
bac公斤round-color: lightgrey;
width: 300px;
height: 300px;
}
#child {
bac公斤round-color: black;
width: 160px;
height: 160px;
/* 下面的160px是当前容器宽度 */
margin-left: calc(50% - 160px / 2)
}
css3的calc属性自适应宽度的容器想实现水平居中方法1、运用css3的transform向左偏移就可实现，代码中的margin-left亦能够运用相对定位实现距离左边50%的距离
#parent {
bac公斤round-color: lightgrey;
width: 300px;
height: 300px;
}
#child {
bac公斤round-color: black;
height: 160px;
margin-left: 50%;
transform: translateX(-50%);
}
html代码片段：
<div id="parent">
<!-- 此处运用行内样式，仅仅用于举例div不定宽 -->
<div id="child" style="width: 160px;"></div>
</div>
| 
发表于 2024-6-30 09:50:23
