html自动居中样式,css样式怎么设置居中？

CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。

CSS的样式居中总结

一、父容器宽度确定时水平居中

(1)通过margin: 0 auto;和text-align: center实现CSS水平居中。

这种方法是实现CSS水平居中最最常用的，我在前端开发中大概有60%的CSS水平居中就是通过“margin: 0 auto; text-align: center”实现的。

(2)通过display:flex实现CSS水平居中。

随着越来越多兼容flexbox，所以通过“display:flex”实现CSS水平居中的方案也越来越受青睐。

通过display:flex实现CSS水平居中的原理是父元素display:flex;flex-direction:column;而子元素align-self:center;这个跟CSS垂直居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。

(3)通过display:table-cell和margin-left实现CSS水平居中。

对于父元素和子元素的宽度都确定的情况，适合通过display:table-cell和margin-left实现CSS水平居中。使用时，父元素display:table-cell，子元素给剩余宽度一半的margin-left。

(4)通过position:absolute实现CSS水平居中。

这种方法跟上一个方法适用场景一样，也是适用于父元素和子元素的宽度都确定的情况。使用时，父元素position:absolute，子元素给剩余宽度一半的margin-left。

(5)通过width:fit-content实现CSS水平居中。

这种方法可以确保子元素宽度不确定的情况下，也能实现CSS水平居中。需要注意的是，需要配合“margin: 0 auto; text-align: center”使用。

二、父容器宽度不确定时水平居中

(1)position:relative:left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);//这里的50%是指盒子本身的50%;

(2) width:fit-content;width:-moz-fit-content;width:-webket-fit-content;margin:auto;

三、水平垂直居中

(一)脱离文档流元素

1、margin:auto法

CSS代码：div{

width: 300px;

height: 300px;

position: relative;

border: 1px solid #465468;

}

img{

position: absolute;

margin: auto;

top: 0;

left: 0;

right: 0;

bottom: 0;

}

HTML代码：

(2) 负margin法

CSS代码：.container{

width: 500px;

height: 400px;

border: 2px solid #379;

position: relative;

}

.inner{

width: 480px;

height: 380px;

background-color: #746;

position: absolute;

top: 50%;

left: 50%;

margin-top: -190px; /*height的一半*/

margin-left: -240px; /*width的一半*/

}

HTML代码：

(二)未脱离文档流元素的居中

(1)table-cell法div{

border: 3px solid #555;

width: 300px;

height: 200px;

display: table-cell;

vertical-align: middle;

text-align: center;

}

span{

vertical-align: middle;

}

HTML代码：

这是放在span中的文字，

通过外层div设置display: table-cell以及vertical-align: middle实现垂直居中。

(2)弹性盒子法

CSS代码：.container{

width: 300px;

height: 200px;

border: 3px solid #546461;

display: -webkit-flex;

display: flex;

-webkit-align-items: center;

align-items: center;

-webkit-justify-content: center;

justify-content: center;

}

.inner{

border: 3px solid #458761;

padding: 20px;

}

HTML代码：

我在容器中水平垂直居中

推荐：css文档