(1)text-align
实现水平居中,比如我们要实现块状元素(block)内,子元素的水平居中;比如我们要实现div2元素在父元素div1内的居中;
<style>
.div1{
text-align:center
}
.div2{
display:inline-block
}
</style>
<div class="div1">
<div class="div2"></div>
</div>
实现效果为:
关键:要实现这种水平居中,在设置父元素具有text-align:center属性的基础上,必须设置子元素(要居中
的元素)的display:inline-block或者display:inline,即只能实现行内块的水平居中。
(2)vertical-align
vertical-align属性实现垂直居中,要实现div1父元素内的子元素div2,让div2实现垂直居中,我们可以这样设置:
<style>
.div1{
display:table-cell;
vertical-align:middle;
}
.div2{
display:inline-block
}
</style>
<div class="div1">
<div class="div2"></div>
</div>
实现的效果为:
注:简单的实现垂直居中,我们可以发现并不需要对子元素进行特殊设置,我们只需要设置父元素的
display:table-cell;vertical-align:middle 之后就能实现垂直方向的居中。(这种方式实现的垂直居中,会
导致水平不居中)
align-items: center与 justify-content: center
display: flex;
align-items: center; /* 弹性盒子flex 元素位于容器的中心设置弹性盒子元素在垂直方向上(纵轴)的对齐方式。*/
justify-content: center; /* 弹性盒子flex 元素位于容器的中心设置弹性盒子元素在主轴(横轴)的对齐方式*/
display:table-cell属性简介
display:table-cell;会使元素表现的类似一个表格中的单元格td,利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性,使用table-cell时最好不要与float以及position: absolute一起使用,设置了table-cell的元素对高度和宽度高度敏感,对margin值无反应,可以响应padding的设置,表现几乎类似一个td元素。