css div垂直居中(两个div垂直居中css)
很多朋友对于css div垂直居中和两个div垂直居中css不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！
DIV+CSS如何让文字垂直居中
div+css实现文字垂直居中的五种方法：
1、把文字放到table中，用vertical-align property属性来实现居中。
<div id="wrapper">
<div id="cell">
<div class="content">Content goes here</div>
</div>
</div>
2、使用绝对定位的 div，把它的 top设置为 50％，top margin设置为负的 content高度。这意味着对象必须在 CSS中指定固定的高度。
#content{
position: absolute;
top: 50%;
height: 240px;
margin-top:-120px;/* negative half of the height*/
}
<div class="content"> Content goes here</div>
3、在 content元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。
content清除浮动，并显示在中间。
<div id="floater">
<div id="content">Content here</div>
</div>
#floater{
float: left;
height: 50%;
margin-bottom:-120px;
}
#content{
clear: both;
height: 240px;
position: relative;
}
4、使用 position:absolute，有固定宽度和高度的 div。这个 div被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto;会使它居中。使用 margin:auto;使块级元素垂直居中即可
<div id="content"> Content here</div>
#content{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
width: 70%;
}
5、将单行文本置中。只需要简单地把 line-height设置为那个对象的 height值就可以使文本居中了。
<div id="content"> Content here</div>
#content{
height: 100px;
line-height: 100px;
}
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;
}使用此种方式，不需要固定高度。只需要给定任意高度或者不给高度，即可实现水平垂直居中效果。
div+css,图片怎么设置在DIV中垂直居中
div+css，图片设置在DIV中垂直居中:
方法一：
思路：利用text-align属性将图片水平居中，然后设置padding-top的值使其垂直居中。
结构如下：
<div>
<img src="images/tt.gif" width="150" height="100"/>
</div>
CSS样式如下：
div{width:300px; height:150px; background-color:#CCC; border:#000 1px solid; text-align:center; padding-top:50px;}
释义：
图片的尺寸为150x100px，DIV的大小为300x200px；
background-color:#CCC; border:#000 1px solid;为DIV加个边框和背景色，便于观察效果。
text-align:center,实现图片的水平居中；padding-top:50px，50px这个数值是经过计算得到的，padding-top的值具体算法如下：（DIV的高度–图片的高度）/2，但这里要注意，根据盒模型原理，我们还要将DIV原来的高度200减去padding-top的值，这样显示的才是正确的，否则DIV会变高。
方法二：
思路：只用padding属性，通过计算求得居中
结构代码同上；
CSS样式如下：
div{width:225px; height:150px; background-color:#eee; border:#000 1px solid; padding-top:50px; padding-left:75px;}
备注：这里DIV的宽高计算都遵循盒模型原理，计算方法同上。
方法三：
思路：
利用图片的margin属性将图片水平居中，利用DIV的padding属性将图片垂直居中。
结构代码同上；
CSS代码如下：
div{width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;}
img{display:block; margin:0 auto;}
备注：
Img是内联元素，要设置其margin属性使其居中，就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中；（有的设计师为图片再加个div标签，然后通过div标签的margin实现居中
好了，文章到这里就结束啦，如果本次分享的css div垂直居中和两个div垂直居中css问题对您有所帮助，还望关注下本站哦！