CSS实现水平垂直居中的几种方法介绍

CSS实现水平垂直居中对齐在CSS中实现水平居中，会比较简单。常见的，如果想实现inline元素或者inline-block元素水平居中，可以在其父级块级元素上设置text-align: center实现；如果想实现块级元素的水平居中对齐，可以设置magin: auto。而如果想实现垂直居中对齐，或许就不太容易。
以下，我总结了一些实现水平垂直居中对齐的一些方法。如果有什么不足之处，望指出。
水平垂直居中的实现可以分为两大内容，一是高度随内容自适应变化，一是固定高度。
固定高度实现水平垂直居中方法一最常用的方法是使用height + line-height的方式，设置同样的值，配合text-align的使用，即可实现文本的水平垂直居中对齐
<div class="container">Hello World！</div>
.container {
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
border: 1px solid red;
}缺点：固定高度，无法实现两行文本的垂直居中对齐
方法二使用绝对定位的方法，配合margin负值使用。可以实现元素的水平垂直居中效果。
<div class="container">Hello World！</div>
.container {
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
width: 300px;
height: 300px;
border: 1px solid red;
}当然了，可以使用CSS3的calc函数简化上面的CSS代码
.container {
position: absolute;
left: calc(50% - 150px);
top: calc(50% - 150px);
width: 300px;
height: 300px;
border: 1px solid red;
}缺点：固定高度，高度无法自适应内容。元素脱离文档流。
方法三添加空标签的方式，并且使该元素浮动，脱离文档流，避免影响其他元素的布局。
<div class="space"></div>
<div class="container">
<div class="inner">
hello world！
</div>
</div>
.space {
float: left;
height: 50%;
margin-top: -150px;
}
.container {
clear: both;
height: 300px;
border: 1px solid red;
position: relative;
}缺点：这种方式下的垂直居中需要固定高度，无法实现内容自适应高度。同时，出现多余的空div元素。
高度自适应实现水平垂直居中方法一CSS3中有transform属性，此属性下有一个translate移动函数，此函数接受两个参数。如果两个参数都为百分比值，此时会基于自身宽度和高定进行移动。此函数移动的机制同position:relative相似。
<div class="container">Hello World！</div>
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); // 自身宽度和高度的一半
border: 1px solid red;
}优点：无需定高度。高度随内容自适应。
缺点：元素脱离文档流。如果需要居中的元素已经在高度上超过了视口，那它的顶部会被视口裁切掉。
方法二我们知道，可以使用margin来实现水平居中对齐，而无法使用margin实现垂直居中的原因在于margin的百分比值是基于宽度计算的。
<div class="container">Hello World！</div>
.container {
width: 300px;
margin: 50% auto 0;
border: 1px solid red;
tarnsform: translateY(-50%);
}上面代码中，由于百分比是基于父元素（此时的父元素为body元素）的宽度计算的，所以此时的50%加上translate负值并不能实现垂直居中布局。
不过，CSS中存在一个vh（视口高度）,也就相当于DOM中document.body.clientHeight或者document.documentElement.clientHeight的高度，1vh=1%，即1vh等于视口高度的1%。vh单位的浏览器兼容性问题可看vh。因此，以上代码可改为如下，即可实现水平垂直居中效果。
<div class="container">Hello World！</div>
.container {
width: 300px;
margin: 50vh auto 0;
transform: translateY(-50%);
border: 1px solid red;
}方法三CSS3中存在flex布局（伸缩布局盒模型，也叫弹性布局盒模型），对于flex熟悉的朋友来说，使用flex实现水平垂直居中是再简单不过的了。
<div class="container">
<div class="inner">
<p>hello world!</p>
</div>
</div>
.container {
display: flex;
height: 100vh;
}
.inner {
margin: auto;
}当我们使父元素display: flex时，margin: auto不仅可以水平居中，也能够实现垂直居中。这是因为auto外边距会平分水平或垂直方向上的额外空间。
当然，也可以使用justify-content: center来定义弹性项目主轴的对齐方式，align-items: center来定义弹性项目侧轴的对齐方式。
<div class="container">
<div class="inner">
<p>hello world</p>
</div>
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}方法四可以使用display: table来模拟表格，并给子元素设置display: table-cell，让其成为表格的某个单元格，同时设置vertical-align: middle，即可实现垂直居中布局
<div class="container">
<div class="inner">
hello world！
</div>
</div>
.container {
display: table; /* 让div以表格的形式渲染 */
width: 100%;
border: 1px solid red;
}
.inner {
display: table-cell; /* 让子元素以表格的单元格形式渲染 */
text-align: center;
vertical-align: middle;
}使用此种方式，不需要固定高度。只需要给定任意高度或者不给高度，即可实现水平垂直居中效果。

CSS实现水平垂直居中的几种方法介绍
答：固定高度实现水平垂直居中方法一最常用的方法是使用height + line-height的方式，设置同样的值，配合text-align的使用，即可实现文本的水平垂直居中对齐Hello World！.container { width: 300px; height: 300px; line-height: 300px; text-align: center; border: 1px solid red;}缺点：固定高度，无法...

css样式如何设置div元素水平垂直居中的三种方法
答：1.建立txt文档，更改后缀名为html,如图：2.右击html文件，选择用记事本打开，如图：3.讲解第一种div绝对定位水平垂直居中【CSS3使用transform】， transform中translate偏移的百分比值是相对于自身大小的，无论绝对定位元素的尺寸是多少，其都是水平垂直居中显示的，但问题是兼容性不好。IE9+以及其他现代浏...

CSS如何实现垂直水平居中
答：CSS实现垂直水平居中的三种方案1.容器内元素display:inline/inline-block这种情况就比较容易了，直接设置容器的text-align就可以实现内容元素的水平居中，设置垂直居中的话要设置容器的高度，然后设置容易的line-height===height就可以，如下： this is text .container{ text-align: center; height: ...

css 如何水平垂直居中一个行内块元素?
答：您可以使用以下方法之一来水平垂直居中一个行内块元素：1. 利用绝对定位实现元素垂直，水平居中显示。2. 利用margin: 0 auto实现块级元素水平居中。3. 根据margin: auto 实现居中。4. 利用text-align: center;实现块级元素内部的行内元素水平居中。5. 利用vertical-align: middle; 实现垂直居中。6. ...

css居中的几种方式_html/css_WEB-ITnose
答：1.margin 这种方式只能实现固定宽度的块级元素水平居中，如果该元素没有设置宽度或者不是块级元素，则不会生效。/*以div元素为例*/div{ width: 100px; height: 100px; margin: auto; /*或者margin: 0 auto;*/} 2.line-height 将单行文字line-height值设置为其父元素高度可以实现该行文字的垂...

如何使文字在div中水平和垂直居中的css代码
答：1. 使用Flex布局 CSS的Flex布局是一种强大的布局方式，可以轻松地实现元素在容器中的灵活布局。为了实现文字在div中的居中，可以将该div的display属性设置为flex。这样，该div就会变成一个弹性容器。2. 水平居中 在弹性容器中，要实现水平居中，可以使用`justify-content: center;`属性。这个属性决定了弹性...

CSS垂直居中的8种方法
答：通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center; 这个跟CSS水平居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。通过伪元素:before实现CSS垂直居中。 具体方式是为父元素添加伪元素:before，使得子元素实现垂直居中。

用CSS 实现元素垂直居中,有哪些好的方案
答：实现垂直居中的四种方法：1. 只能是单行文本居中（可适用于所有浏览器）：.content{ height:100px;line-height:100px;} 2. 跟水平居中一样，垂直也可以用定位的方法：.content{ position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;} 或者 .content{ position:absolute;top:50%;...

怎么使用CSS让图片水平垂直都居中?
答：CSS是层叠样式表。下面，我们来看看怎么使用CSS让图片水平垂直都居中吧。1、新建一张文档 在桌面新建一张文本文档，改名为1.txt，如下图所示：2、基础代码 然后打开文本文档，编写基础代码，再把桌面上的老虎图片引入进去，如下图所示：3、后缀名 然后把文本文档后缀名改为.html，如下图所示：4、运行...

css垂直居中怎么设置
答：通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;这个跟CSS水平居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。3、通过伪元素:before实现CSS垂直居中。具体方式是为父元素添加伪元素:before，使得子元素实现垂直居中。