搜索
您的当前位置:首页Css实现垂直水平居中的六种方法_html/css_WEB-ITnose

Css实现垂直水平居中的六种方法_html/css_WEB-ITnose

时间:2023-11-27 来源:明星茬娱乐

经常在项目中用到,今天总结了一下:

演示地址:http://codepen.io/anon/pen/xGdpOa

以下两个类为公共类,便于更好的显示效果,非核心代码

.common{width: 600px;height: 180px;background-color:#56abe4;color: #fff;margin: 15px auto; border-radius: 3px; }.con{display: inline-block;padding: 15px;width: 160px;height: 80px;background-color: orange;}

正文部分:

第一种方法:

/*position: absolute;top:0;right: 0;bottom: 0;left: 0;margin: auto;*/

HTML结构:

position: absolute;top:0;right: 0;bottom: 0;left: 0;margin: auto;

CSS部分:

.block1{position: relative;}.inner1{position: absolute;top:0;right: 0;bottom: 0;left: 0;margin: auto;}

第二种方法: 

/*display: table-cell*/

HTML结构:

 display: table-cell;text-align: center;vertical-align: middle;

CSS部分: 

.block2{display: table-cell;text-align: center;vertical-align: middle;}

第三种方法:

/*display: flex;*/

HTML结构:

 display: flex; align-items: center; justify-content: center;

CSS部分:

.block3{display: flex;align-items: center;justify-content: center;}

第四种方法:

/*负定位*/

HTML结构:

 position: absolute;top: 50%;left: 50%; 并利用负定位消除元素的上下,左右偏移

CSS部分:

.block4{ position: relative;}.inner4{position: absolute;top: 50%;left: 50%;margin-top: -55px;/*80/2+15=55*/ margin-left: -95px;/*160/2+15=95*/}

第五种方法:

/*transform*/

HTML结构:

position: absolute;top: 50%;left: 50%; transform:translate(-50%,-50%);

CSS部分:

.block5{ position: relative;}.inner5{position: absolute;top: 50%;left: 50%; transform:translate(-50%,-50%); word-wrap: break-word;}

第六种方法:(兼容性较好)

/*行内块*/

HTML结构:

行内块:谨记span标签与该div之间是没有空白的,否则会产生误差

CSS部分:

.block6{ text-align:center;}.inner6,.block6 span{ display:inline-block; *display:inline; zoom:1; vertical-align:middle;}.inner6{max-width:100%;max-height:100%;}.block6 span{width:0;height:100%;}

以上几种方案存在兼容性问题,在使用时请先查询核心css的浏览器兼容情况,查询地址:http://caniuse.com/

以上。

欢迎补充~

小编还为您整理了以下内容,可能对您也有帮助:

css如何实现图片在div中垂直居中

本文章主要介绍css如何实现图片在div中垂直居中问题,具有一定参考价值,希望能给大家提供帮助

平时我们在做页面时经常会遇到让我们把一张图片显示在div正中间但是常常不知道如何去做,今天我们来分享几种常用的css实现图片在div中垂直居中的代码

HTML代码

<div>

<img src="images/1.jpg">

</div>方法一

利用position和margin共同实现

通过给父元素设置绝对定位属性来让子元素相对于div定位

relative是保留原来的位置进行定位并且是相对于自己原来的位置进行定位

absolute 是脱离原来位置定位,是相对于最近的有定位的父级进行定位;如果没有有定位的父级元素,就相对于文档进行定位

注意:要使子元素的上下左右都为0,然后设置margin:auto就会自动垂直居中

代码如下

div{

width:200px;

height:200px;

border: 1px solid #ccc;

position: relative;//父元素设置绝对定位

}

img{

position: absolute;//相对定位

width:80px;

height:50px;

top:0;

left:0;

right:0;

bottom:0;

margin:auto;//使其垂直居中

}效果图

方法二

利用display: table-cell;vertical-align: middle;text-align: center;三种属性实现

display:table-cell:会作为一个表格单元格显示(类似 <td> 和 <th>)

vertical-align: middle;设置垂直对齐方式,适用于行级元素

text-align: center:设置水平对其方式,该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。

div{

width:200px;

height: 200px;

margin:300px auto;

display: table-cell;//作为一个表格单元格显示

vertical-align: middle;//设置垂直对齐方式

text-align: center;//设置水平对其方式

border:1px solid #ccc;

}

img {

width:80px;

height:50px;

}效果图

方法三

利用position,以及margin-top、margin-left实现

在本方法中要注意margin-top、margin-left值的设定,要设置为元素高度和宽度的一半,而且都要取负值

例如margin-top: -40px意思就是元素距离上边界向上40px,而margin-top: 40px的意思是距离上边界元素向下40px

div{

width:200px;

height:200px;

border: 1px solid #ccc;

position: relative;

}

img{

position: absolute;

width:80px;

height: 50px;

top:50%;

left:50%;

margin-top: -40px;//向上40px

margin-left: -25px;//向左25px

}效果图

总结:实现利用css将图片在div中垂直居中问题的方法有很多中,

CSS实现垂直居中的7种方法

HTML:

CSS:

重点:父容器高度和子元素line-height一样的数值,内容中的行内元素就会垂直居中。

HTML:

CSS:

重点:给父元素添加一个伪元素::before,让这个伪元素的div高度为100%,这样其他div就可垂直居中了,但div 本身就是块级元素,而vertical-align是行内元素属性,则需要修改为inline-block。

HTML:

CSS:

重点:在父元素中设置相对定位position: relative,子元素设置绝对定位 position: absolute;top和left相对父元素的50%,与其搭配的 transformse: translate(-50% , -50%)表示X轴和Y轴方向水平居中。

HTML:

CSS:

重点:子元素绝对定位position:absolute,父元素相对定位position: relative,将上下左右的数值都设置为0,同时margin:auto。绝对定位是会脱离文档流的,这点要注意一下。

HTML:

CSS:

重点:给父元素设置display: flex布局,水平居中 justify-content: center,垂直居中align-items: center。

HTML:

CSS:

重点:父元素position定位为relative,子元素position定位为absolute。水平居中同理。calc居中要减多少要结合到自己的宽高设置多少再进行计算。

HTML:

CSS:

重点:将父元素设置display:table,子元素table-cell会自动撑满父元素。组合 display: table-cell、vertical-align: middle、text-align: center完成水平垂直居中。

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居中的几种方式_html/css_WEB-ITnose

居中分水平和垂直两种,使用的频度也算是很高,下面分情况来讨论一下几种常用的实现方式。

欢迎指正文中的错误,同时如果有学习到新的方式也会更新在后面,也方便以后温故知新。

1.margin 这种方式只能实现固定宽度的块级元素水平居中,如果该元素没有设置宽度或者不是块级元素,则不会生效。

/*以div元素为例*/div{ width: 100px; height: 100px; margin: auto; /*或者margin: 0 auto;*/}

2.line-height 将单行文字line-height值设置为其父元素高度可以实现该行文字的垂直居中,局限也很明显。

文字内容

#container{ height: 30px;}#content{ line-height: 30px;}

3.表格 如果你使用表格的话,那么可以利用td元素的align:center和valign:middle属性轻易的做到水平和垂直居中,但是考虑到现在表格布局的使用频率已经很低了,实用性其实并不强。

4.display: table-cell 由于单元格可以轻易的实现水平和垂直居中,所以可以把父元素容器模拟成单元格元素,通过样式text-align:center以及vertical-align:middle来达到一样的效果。但是要注意的是text-align:center只能使非块级子元素水平居中而对块级子元素无效。

#table{ display: table-cell; width: 200px; height: 200px; vertical-align: middle; text-align: center;}

5.绝对定位居中 这个方法使用的相对也较多,但是需要子元素有固定的宽高,不多说直接上代码。

html,body{ width: 100%; height: 100%;}body{ position: relative;}body>div{ position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; /*此时的元素并不是居中的,向右偏了一半的宽度,向下偏了一半的高度*/ /*所以要使用margin把元素拉回来*/ margin: -50px 0 0 -50px; }

明星茬娱乐还为您提供以下相关内容希望对您有帮助:

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

固定高度实现水平垂直居中方法一最常用的方法是使用height + line-height的方式,设置同样的值,配合text-align的使用,即可实现文本的水平垂直居中对齐&lt;div class="container"&gt;Hello World!&lt;/div&gt;.container { width: 300px...

CSS如何实现垂直水平居中

CSS实现垂直水平居中的三种方案1.容器内元素display:inline/inline-block这种情况就比较容易了,直接设置容器的text-align就可以实现内容元素的水平居中,设置垂直居中的话要设置容器的高度,然后设置容易的line-height===height就...

CSS垂直居中的8种方法

通过隐藏节点实现CSS垂直居中。 创建一个隐藏节点#hide,使得隐藏节点的height值为剩余高度的一半即可。 这种方法也适用于CSS水平居中,原理一样。已知父元素高度通过transform实现CSS垂直居中。 给子元素的position:relative,再通...

CSS3如何实现元素水平居中、垂直居中

父元素高度确定的单行文本 垂直居中的方法是通过 设置父元素的height和line-height高度一致来实现的 说到竖直居中,css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效 父元素...

css样式如何设置div元素水平垂直居中的三种方法

1.建立txt文档,更改后缀名为html,如图:2.右击html文件,选择用记事本打开,如图:3.讲解第一种div绝对定位水平垂直居中【CSS3使用transform】, transform中translate偏移的百分比值是相对于自身大小的,无论绝对定位元素的...

详解html的几种水平垂直居中的方式(基础)

第一种方法&lt;!--html盒子代码--&gt;&lt;!--水平垂直居中--&gt;&lt;div class="Centered1"&gt; &lt;p&gt;d第一种&lt;/p&gt;&lt;/div&gt;&lt;!-css样式部分--&gt; .Centered1{ background-color: #800070; width: 100%; height:500px; position: ...

前段布局垂直水平居中常用方式

水平居中:水平居中就是为了让子元素在父元素中排列在水平中心位置,实现方式很多,我们看几种常用的。1. 使用display:inline-block和text-align:center display:inline-block;text-align:center;原理就是将子容器设置为行内...

css如何实现图片在div中垂直居中

今天我们来分享几种常用的css实现图片在div中垂直居中的代码HTML代码&lt;div&gt;&lt;img src="images/1.jpg"&gt;&lt;/div&gt;方法一利用position和margin共同实现通过给父元素设置绝对定位属性来让子元素相对于div定位relative是保留原来的位置...

html的元素水平垂直居中应该怎么设置

到现在为止,探讨了很多种方法。HTML:&lt;body&gt; &lt;div class="maxbox"&gt; &lt;div class="minbox align-center"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt;第一种: CSS绝对定位主要利用绝对定位,再用margin调整到中间位置。父元素:.max...

如何在网页里让字居中对齐?

center; height: 100vh;}&lt;/style&gt;&lt;div class="center-both"&gt;这是水平和垂直居中的文本。&lt;/div&gt;选择适合你布局和设计需求的方法,然后将对应的CSS样式应用到包含文本的HTML元素中,以实现文本的居中对齐。

Top