css常用的居中方式

常用的居中方式：

1.text-align:center;

这种居中方式可以水平居中块级元素中的行内元素inline，inline-block；

<div style="text-align:center">
	<span style="display:inline-block;width:100px">居中</span>
<div>

但是这个方法居中块级元素中的块级元素时，如果div中的div设置了自己的宽度，那么只能居中，子元素的文字，通俗的说text-align:center单独使用时只能居中文字；

<div style="text-align:center;position:relative">
	<div style="position:absolute">块级元素</div>
<div>

还有一种脱离文档流的情况，父元素设置属性position:relative/absolute/fixed，子元素设置position:absolute
这时候子元素左端会居中；

2.margin:0 auto方式

在不脱离文档流的情况使用这种方式可以左右居中，如果设置了脱离文档流属性则会失效

<div style="">
	<div style="width:100px；margin：0 auto>块级元素</div>
<div>

下面重点来了常用的
3.脱离文档流的居中方式（上下左右居中）：
这种方式常被用在设置弹出框

<div class="div1">
	<div class="div2">块级元素</div>
<div>
.div1{
 position: fixed;
　　top: 0;
　　left: 0;
　　width: 100%;
　　height: 100%;
　　...其他样式
 }
 div2{
    position: absolute;
    width: 600px;
    height:400px;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    margin-top: -200px;
 }
 

写到top: 50%;left: 50%;的时候，这时候内部div是按左边居中的，这时候设置margin-left为负的宽度的一般，margin-top为负的高度的一般就居中了；
div2里面还可把top: 50%;left: 50%替换成margin：(高度的一半)，auto

4.display:table-cell的方式居中

display:table-cell配合width，text-align:center,vertical-align:middle让大小不固定元素垂直居中,这个方式将要对其的元素设置成为一个td，float、absolute等属性都会影响它的实现，不响应margin属性;

<div class="div1">
	<div class="div2">块级元素</div>
<div>
<style>
	.div1{
	  display:table;
	  width:100%;
	}
	.div2{
	  display:table-cell;
	  text-align: center;
　　  vertical-align: middle;
	}
</style>

5.垂直居中line-heigth

<div style="height：40px;line-heigth:40px;">
　　我是要居中的内容
</div>

6.使用css3的translate水平垂直居中元素

这种方式将脱离文档流的元素，设置top：50%，left：50%，然后使用transform来向左向上便宜半个内元素的宽和高。

<div class="div1">
	<div class="div2">块级元素</div>
<div>
.div1{
    position: relative;
    height: 400px;}
}
.div2{
    position: absolute;
    width: 300px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

7.flex布局方式居中

<div class="div1">
	<div class="div2">块级元素</div>
<div>
div1{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
div2{
	width:200px;
	height:200px;
	background:red;
}