css样式水平居中,css设置水平居中垂直居中

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

CSS水平居中的9种方法

容器的居中显示在网页设计中是很常见的，居中显示可以获得视觉的焦点，是内容更加突出，下面就简单的说明一下如何在HTML中通过样式的控制来实现

最常见的一种，代码示例如下图，首先，取big一半像素大小赋给small层，通过margin: 0 auto; text-align: center来实现

第二种方法，代码示例如下图，将big层的display设置为table-cell,然后small层的margin-left取（500-250）/2，也就是125即可

第三种方法，代码示例如下图，将big层的position设置为absolute，然后small层的margin-left取（500-250）/2，也就是125即可

第四种方法，通过display:flex实现，代码示例如下图，big层display:flex;flex-direction:column;而small层align-self:center

第五种方法，在small层的宽度没有的时候，可以通过width:fit-content这个设置来完成，代码示例如下

第六种方法，通过display:inline-block来实现，将这个设置赋给big层即可，代码示例如下图

第七种方法，设置big层position:relative，相对情况下，使small层左浮动，代码示例如下

第八种方法，transform属性，代码示例如下

第九种方法，借助第三方样式，比如增加一个add节点，水平浮动向左，使small层随之浮动，代码示例如下

特别提示

每种方法都适应不同的运行环境，实际操作时需要考虑不同浏览器的解析时的兼容性

相关问答

Q1: CSS实现水平居中的几种方式极客标签

对于行内元素：

text-align:center;

二、对于确定宽度的块级元素：

（1）margin和width实现水平居中

常用(前提：已设置width值)：margin-left:auto; margin-right:auto;

（2）绝对定位和margin-left: -(宽度值/2)实现水平居中

固定宽度块级元素水平居中，通过使用绝对定位，以及设置元素margin-left为其宽度的一半

.content{

width: 200px;

position: absolute;

left: 50%;

margin-left: -100px; // 该元素宽度的一半，即100px

background-color: aqua;

}

（3）position:absolute + （left=0+top=0+right=0+bottom=0） + margin:auto

.content{

position: absolute;

width: 200px;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

}

Q2: CSS之元素水平居中

我们以一个面试题开始吧

这道题看似貌似很简单，但是我们需要分析具体的场景，因为不同的显示方式的使用利弊是不一样的。

以下的讨论都是子元素相对于其父元素的水平居中。垂直居中，以后会说到。

常见的行内元素有 span img 等，对这些元素居中设置，只需要在父元素的css中添加 text-align:center 即可。同样它也对行内块元素也是有效的。

但是，有个缺点，由于 text-align 是可继承属性，即父元素内部的所有元素都会继承这个属性，从而它的子元素内部的文本都会居中显示了。因此需要对子元素的文本居中方式单独设定。

针对块级元素的居中，我们将分为定宽和不定宽两种情况来讨论。

1.定宽

（1）子元素是正常流布局

若子元素的宽度是已知的，那么我们可以设置子元素的左右 margin 为 auto 即可

行内块元素也算块级元素，同样适用

目前所有浏览器都是支持的

（2）子元素绝对定位布局(absolute)

如果子元素是绝对定位的，由于子元素此时是脱离文档流，上面的方法就失效了。这时需要明确指出子元素的定位，四个方位均要指定。如下：

这样也可以实现绝对定位元素的居中。原因可点击这里。如果绝对定位子元素的margin为auto，你会发现它水平垂直居中了！此方法仅适用于IE8+浏览器中，IE7就挂了，不过你可以下面这个方法：

2.不定宽

不定宽元素如果要居中需要额外的辅助手段

（1）css3新特性 transform

如果你对浏览器并没有什么特别要求，那么可以使用css3提出的新属性 transform 完成居中需求

这里需要子元素是绝对定位

（2）借助table元素

上面定宽元素设定左右margin为auto之所以可以居中，原因是左右margin会平分父元素剩下的空间。有个元素除外，那就是tabel元素。table有趣的地方在于它本身并不是块级元素，如果不给它设定宽度的话，它的宽度由内部元素的宽度“撑起”，但即使不设定它的宽度，仅设置margin-left:auto和margin-right:auto就可以实现水平居中。

最大的缺点想必你也是知道，就是无关标签太多，加深了嵌套的层级，维护性很差。

（3）父元素使用float布局

这里需要多添加一层父元素，父子元素均float布局，之后设置position为relative，left为50%

缺点是你需要额外处理浮动所带来的一些问题。并且如果你设置了背景色，布局会有些混乱

以上是我对元素实现居中的一些方法，欢迎大家补充。

2017.6.11 晴

于上海浦东

Q3: css 怎么实现 div水平居中呢？

因为“text-align:center”控制的是文本居中，div居中可以用外边距margin来实现。

1、新建html文件，在body标签中添加div标签，div标签中的内容为“演示文本”，添加题目中的css样式，为了方便演示，给div标签添加灰色背景，这时可以发现div靠近浏览器的左侧，文字在div中居中：

2、为div标签添加新的外边距“margin”属性，属性值为“0 auto”，“0”指的是上下外边距为0，“auto”指的是左右外边距为自适应：

3、这时无论浏览器的宽度是多少，div都会在浏览器上水平居中：

Q4: css实现水平居中的几种方式

利用css进行元素的水平居中，比较简单，行级元素设置其父元素的text-align

center，块级元素设置其本身的left

和

right

margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法，每一种适用于不同的情况，在实际的使用过程中选择某一种方法即可。

Q5: css怎么设置居中

水平居中

若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.

若是块级元素, 该元素设置 margin:0 auto即可.

若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置:

.parent{

width: -moz-fit-content;

width: -webkit-fit-content;

width:fit-content;

margin:0 auto;}

使用flex 布局, 可以轻松的实现水平居中, 子元素设置如下:

.son{

display: flex;

justify-content: center;}

使用CSS3中新增的transform属性, 子元素设置如下:

.son{

position:absolute;

left:50%;

transform:translate(-50%,0);}

使用绝对定位方式, 以及负值的margin-left, 子元素设置如下:

.son{

position:absolute;

width:固定;

left:50%;

margin-left:-0.5宽度;}

使用绝对定位方式, 以及left:0;right:0;margin:0 auto; 子元素设置如下:

.son{

position:absolute;

width:固定;

left:0;

right:0;

margin:0 auto;}

垂直居中

若元素是单行文本, 则可设置 line-height 等于父元素高度

若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央.

.parent::after, .son{

display:inline-block;

vertical-align:middle;}.parent::after{

content:'';

height:100%;}

元素高度不定

可用 vertical-align 属性, 而vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;

用 Flex 布局

.parent {

display: flex;

align-items: center;}

可用 transform , 设置父元素相对定位(position:relative), 子元素如下css样式:

.son{

position:absolute;

top:50%;

-webkit-transform: translate(-50%,-50%);

-ms-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);}

元素高度固定