css居中实现

margin :0 auto; 常用的水平居中方式
margin:auto;
auto的计算方式:一个有特定宽度的元素,若左右边距为auto,浏览器会取它的容器和该容器的宽度之差,除以2,作为该元素的左边距和右边距,所以是 左右的外边距等于父容器减去子容器剩余部分的宽度均匀分配给左右,从而实现居中对齐的效果

***margin使用百分比单位计算的情况
margin: 20%; 百分比是按照父容器的宽度来计算的,务必注意

text-align:center; 水平居中 ,针对行内元素
居中一
positon:absolute
top:50%
left:50%
margin-top:-50px /* -50px 为高度的一半 ,下同,为宽度的一半/
margin-left:-50px
width:100px; /
100px 为测试数据 例二 例三中同/
height:100px;
该方式需要确定居中元素的宽高
居中二
positon:absolute
top:50%
left:50%
width:100px;
height:100px;
transform:translate(-50%,-50%); /
自动计算出宽高的一半,实现自动偏移*/
该方式可以不知道居中的宽高

居中三

    position:absolute;
    top:0;
    left:0;
bottom:0;
right:0;
width:100px;
height:100px;
margin:auto;

绝对定位+margin:auto

居中四
position:absolute;
top:25%;
left:0;
bottom:25%;
right:0;
width:100px;
height:100px;
margin:auto;

绝对定位+margin:auto

居中五
display: -webkit-box;
display:-moz-box;
display:-ms-box
-webkit-box-pack:center;
-moz-box-pack:center;
-ms-box-pack:center;
-webkit-box-align:center;
-moz-box-align:center;
-ms-box-align:center;
需要在其父元素中定义,因为弹性盒子是作用于子元素的,*要注意浏览器兼容问题

line-height:实现文字垂直居中,一般会附加 overflow:hidden
垂直居中:
父元素
display:table;
需要居中元素
vertical-align:middle;
display:table-cell;

标签: none