CSS中居中的几种方式
1.水平居中margin：0 auto；块级元素在块级元素中居中设置在子元素上，前提是不受float影响
2.text-align只对行级元素有用,行级元素设置浮动，或者设置定位之后。给它的父元素设置text-aglin：center不会使它在父元素中居中
3.margin:0 auto对于已经定位的元素没有作用,已经定位的元素靠left和top定位
4.text-align只能让其div包含的行级元素中的文字或者是行块级元素中的文字水平居中
5.text-align这个属性只作用于文本元素，在p标签中在没有border的情况下，作用于让文本在div中居中，在文本有border**的情况下，作用于让文本内容在border范围内居中。这时若是想让p标签整体在div中居中，则需要设置margin：0 auto来达到居中效果<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
border:3px solid red;
<!--1.text-align: center;-->
/*1.对块级元素没有用，只对行级元素有用*/
/*1.当img是行级元素时text-align起作用*/
}
img{
/*2.display: block;*/
width: 100px;
height: 100px;
/*2.margin: 0 auto;*/
}
</style>
</head>
<body>
<div class="box">
<img src="../resources/2.jpg" alt="">
</div>
</body>2.水平垂直居中
需要水平垂直居中的元素减去margin的宽高一半，这个方法同样适用于float的元素
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
border:3px solid red;
position: relative;
}
img{
/*display: block;*/
<!--无论img是行级元素还是块级元素定位都能使元素水平垂直居中-->
width: 100px;
height: 100px;
position: absolute;
top:50%;
<!--使元素到距离参照元素的下面的百分之五十-->
left: 50%;
<!--使元素到距离参照元素的左面的百分之五十-->
<!--此时元素位于参照元素中心的左下角-->
margin-top:-50px ;
<!--因此将元素往上移自己高度的一半-->
margin-left: -50px;
<!--往左移自己宽度的一半-->
}
</style>
</head>
<body>
<div class="box">
<img src="../resources/2.jpg" alt="">
</div>
</body>margin-auto水平垂直居中
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
border:3px solid red;
position: relative;
}
img{
/*display: block;*/
width: 100px;
height: 100px;
margin: auto;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box">
<img src="../resources/2.jpg" alt="">
</div>
</body>水平垂直居中（三）
绝对定位和transfrom
很厉害的方式
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
border:3px solid red;
position: relative;
}
img{
width: 100px;
height: 100px;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="box">
<img src="../resources/2.jpg" alt="">
</div>
</body>水平垂直居中（四）
利用C3的新特性flex，在移动端使用完美，pc端有兼容问题
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
border:3px solid red;
display:flex;
justify-content:center;
align-items:center
}
img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box">
<img src="../resources/2.jpg" alt="">
</div>
</body>