导读
一般常用水平或垂直居中主要使用的属性为margin、position:absolute;、transform、flex、vertical-align、text-align、line-height…
页面结构
vertical-align: middle;针对行内块元素使用 , 如 input 对齐, img 去掉下边空白,
<div class="parent">
<div class="child">
123
</div>
</div>
水平居中
(1) 若是行内元素, 给其父元素设置 text-align:center
,即可实现行内元素水平居中.
(2) 若是块级元素, 该元素设置 margin:0 auto
即可.
(3)使用CSS3中新增的transform
属性, 子元素设置如下:
.child {
position: absolute;
left: 50%;
transform: translate(-50%,0);
}
(4)使用flex弹性布局的justify-content
属性, 父元素设置如下:
.parent {
display: flex;
justify-content: center;
}
(5)使用绝对定位方式, 以及left:0;right:0;margin:0 auto; 子元素设置如下:
.son{
position:absolute;
left:0;
right:0;
margin:0 auto;
}
(6)使用绝对定位方式, 以及负值的margin-left, 子元素设置如下:
.child {
position:absolute;
width:固定;
left:50%;
margin-left:-0.5宽度;
}
(7)若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置:
.parent{
width: -moz-fit-content;
width: -webkit-fit-content;
width:fit-content;
margin:0 auto;
}
fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以轻松实现水平居中, 目前只支持Chrome 和 Firefox浏览器.
垂直居中
(1)若元素是单行文本, 则可设置 line-height
等于父元素高度
(2)可用 transform
, 设置父元素相对定位(position:relative
), 子元素样式:
.child {
position:absolute;
top:50%;
transform: translate(0,-50%);
}
(3)flex 弹性布局
.parent{
display: flex;
align-items: center;
}
(4)设置父元素相对定位(position:relative
), 子元素如下css样式:
.son{
position:absolute;
top:0;
bottom:0;
margin:auto 0;
}
(5)元素高度固定,设置父元素相对定位(position:relative
), 子元素如下css样式:
.child {
position:absolute;
top:50%;
height:固定;
margin-top:-0.5x高度;
}
(6)可用 vertical-align 属性, 而vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;
水平垂直居中
(1)利用position和margin,设置父元素相对定位(position:relative
)
.child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
(2)利用position和transform,设置父元素相对定位(position:relative
)
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
(3)使用弹性布局
.parent {
display: flex;
align-items: center;
justify-content: center;
}
(4)利用position和margin,设置父元素相对定位(position:relative
)(子元素宽高固定)
.child {
position: absolute;
left: 50%;
top: 50%;
margin-left: -0.5 x width;
margin-height: -0.5 x height;
}
(5)使用 display: table-cell;
.parent {
width: 300px;
height: 300px;
background-color: #cccccc;
display: table-cell;
vertical-align: middle;
/* 水平居中: 行内块元素用这个 */
/* text-align: center; */
}
.child {
height: 100px;
width: 50%;
background-color: blue;
/* 块级元素 要同这个 */
margin: 0 auto;
/* display: inline-block; */
}
如果你不给display:table-cell的父亲或祖先节点设置display:table,浏览器会创建匿名的table-row框和table块框/table内联框出来。display:table 和 display:table-cell 需要一起用吗?
参考
https://louiszhai.github.io/2016/03/12/css-center/
CSS之水平垂直居中