CSS--居中方式总结

一、水平居中方法

1.行内元素、字体的水平居中

1.对于行内元素（display值为inline或inline-block都可以）或者字体：父元素添加css规则：text-align：center;

<style>
p{/*关键*/text-align:center;
}ul{/*关键*/    text-align:center:
}
/*这里li设置inline-block*/
.item{/*关键*/display:inline-block;
}</style>
<!--字体-->
<p>I am ry</p><!--行内元素-->
<ul><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li>
</ul>

2.块元素的水平居中

1.使用margin实现水平居中

将margin-left 和 margin-right 设置为auto，块元素将会自动匹配适应，实现水平居中

<style>
*{margin:0;padding:0;
}
.box1{height:300px;background:blue;
}
.item1{/*关键，margin-left，margin-right设置为auto*/margin: 0 auto;width: 100px;height: 100px;background:red;
}
</style>
<body><div class="box1"><div class="item1"></div></div>
</body>

2.使用position margin-left实现水平居中

定位后，设置left先整体偏移父容器的一半，再使用负margin-left自己一半的宽度，从而子元素中心对准父元素中心。

<style>
.box2{position:relative;height:300px;background:blue;
}
.item2{/*关键 相对定位*/position: relative;/*关键*/left: 50%;/*关键*/margin-left:-50px;width:100px;height:100px;background:red;
}
</style>
<body><div class="box2"><div class="item2"></div></div>
</body>

3.如果是多个块元素在同一水平线居中排列，则将其display设置成inline-block，还有一种是使用flexbox的布局方式来实现。

块元素设置了inline-block后，拥有行内元素并排特点，只要父元素设置text-align即可使其水平居中。

<style>
.box3{/* 关键，对于行内元素水平居中 */text-align: center;
}.item3{/* 关键，将块元素设置成行内块接元素 */display:inline-block;width:100px;height: 100px;background:red;
}
</style>
<body>
<div class="box3"><div class="item3"></div><div class="item3"></div><div class="item3"></div><div class="item3"></div></div>
</body>

二、垂直居中

1.行内元素或者文字（单行情况）

1.可以直接使用line-height属性来设置: 将line-height设置成和height一样即可

<style>.text{height:100px;line-height:100px;border:1px solid red;}
</style><body><div class="text">we dont talk anymore</div>
</body>

2.使用padding（top,bottom）通过增加内边距来实现垂直的居中

<style>
.ctext{/*关键*/padding-top:30px;padding-bottom:30px;border:1px solid red;}
</style>
<body><div class="ctext">确认过眼神，我遇上对的人</div>
</body>

2.行内元素或者文字（多行情况）

1.照样可以使用padding（top 和 bottom）

2.对父元素设置display:table-cell 和 vertical-align:middle

<style>.box{/* 将其变成单元格的形式 */display: table-cell;/* width:100px; */height:300px;border:1px solid red;/* 设置内联元素的垂直对齐的方式 */vertical-align: middle;}</style>
<body><div class="box"><span>how to love</span><br><span>I knoe I need somebody</span><br><span>I know I need somebody</span><br><span>pary for me</span></div>
</body>

3.块元素垂直居中

1.确定宽高的情况

使用position 和 margin-top配合

<style>*{margin:0;padding:0;}/* 父元素 */.parent{position:relative;height:400px;border: 1px solid blue;}/* 子元素 */.child{/* position  */position: relative;/* 距离顶部50% */top:50%;/* 再用margin-top     向上调子容器一半高度，则刚好子元素中心对准父元素中心 */margin-top:-100px;height:200px;border:1px solid red;}
</style>
<body><div class="parent">parent<div class="child">child</div></div>
</body>

2.对于未知宽高的

使用transform 的 translateY(-50%) 向上平移自身一半

<style>.parent2{position: relative;background:blue;height:400px;}.child2{position: relative;top:50%;transform: translateY(-50%);background: red;}
</style>
<div class="parent2">parent2<div class="child2">child2</div>
</div>

3.使用flex布局

<style>.parent3{/*关键flex*/display:flex;display: -webkit-flex;/* 对齐排列居中 */justify-content:center;/* 排列方向垂直 */flex-direction:column;height:400px;background:yellow;}.child3{height:100px;}
</style>
<body><!-- flexbox --><div class="parent3"><div class="child3"></div></div>
</body>

三、水平且垂直居中

1.position 和 margin 配合

<style>*{margin: 0 ;padding: 0 ;}.box1{position:relative;height:400px;background:blue;}.item1{/*关键*/position: absolute;top: 50%;left: 50%;margin-top:-50px;margin-left:-50px;width:100px;height:100px;background: red;}
</style>
<body><div class="box1"><div class="item1"></div></div>
</body>

2.使用flex布局

同时设置两条居中属性 justify-content 和 align-items

<style>.box2{display: flex;/*关键*/justify-content: center;/*关键*/align-items: center;height:300px;background:yellow;}.item2{width:50px;height:50px;background:red;}
</style>
<body><div class="box1"><div class="item1"></div></div><div class="box2"><div class="item2"></div></div>
</body>