CSS实现垂直水平居中

最新推荐文章于 2023-09-30 13:11:25 发布

lloyvhe

最新推荐文章于 2023-09-30 13:11:25 发布

阅读量448

点赞数 1

分类专栏： web前端文章标签： web前端布局

本文链接：https://blog.csdn.net/lloyvhe/article/details/50771182

版权

web前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

一、绝对居中Absolute Centering

需要声明元素高度

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	div{
		height: 100px;
		width: 100px;
		border:1px solid red;
		background: yellow;
		
	}
	.one{
		margin: auto;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
	.one{
		margin: auto;
		position: absolute;
		top: 0;
		left: 0;
                bottom:0;
                right:0;
	}
</style>
</head>   
<body>    
<div class='one'>
	我要垂直水平居中
</div>

优点：

1.支持跨浏览器，包括IE8-IE10.

2.无需其他特殊标记，CSS代码量少

3.支持百分比%属性值和min-/max-属性

4.只用这一个类可实现任何内容块居中

5.不论是否设置padding都可居中（在不使用box-sizing属性的前提下）

6.内容块可以被重绘。

7.完美支持图片居中。

缺点：

1.必须声明高度（查看可变高度Variable Height）。

2.建议设置overflow:auto来防止内容越界溢出。（查看溢出Overflow）。

3.在Windows Phone设备上不起作用。

浏览器兼容性：

Chrome,Firefox, Safari, Mobile Safari, IE8-10.

绝对定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均测试通过。

效果图：

Technique	Browser Support	Responsive	Overflow	resize:both	Variable Height	Major Caveats
Absolute Centering	Modern & IE8+	Yes	Scroll, can overflow container	Yes	Yes*	Variable Height not perfect cross-browser
Negative Margins	All	No	Scroll	Resizes but doesn't stay centered	No	Not responsive, margins must be calculated manually
Transforms	Modern & IE9+	Yes	Scroll, can overflow container	Yes	Yes	Blurry rendering
Table-Cell	Modern & IE8+	Yes	Expands container	No	Yes	Extra markup
Inline-Block	Modern, IE8+ & IE7*	Yes	Expands container	No	Yes	Requires container, hacky styles
Flexbox	Modern & IE10+	Yes	Scroll, can overflow container	Yes	Yes	Requires container, vendor prefixes

解释：

通过以上描述，绝对居中（AbsoluteCentering）的工作机理可以阐述如下：

1、在普通内容流（normal content flow）中，margin:auto的效果等同于margin-top:0;margin-bottom:0。

W3C中写道If 'margin-top', or'margin-bottom' are 'auto', their used value is 0.

2、position:absolute使绝对定位块跳出了内容流，内容流中的其余部分渲染时绝对定位部分不进行渲染。

Developer.mozilla.org:...an element that is positioned absolutely is taken out of the flow and thustakes up no space

3、为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框，此时该块block将填充其父元素的所有可用空间，父元素一般为body或者声明为position:relative;的容器。

Developer.mozilla.org:For absolutely positioned elements, the top, right, bottom, and left propertiesspecify offsets from the edge of the element's containing block (what theelement is positioned relative to).

4、给内容块设置一个高度height或宽度width，能够防止内容块占据所有的可用空间，促使浏览器根据新的边界框重新计算margin:auto

Developer.mozilla.org: The margin of the[absolutely positioned] element is then positioned inside these offsets.

5、由于内容块被绝对定位，脱离了正常的内容流，浏览器会给margin-top,margin-bottom相同的值，使元素块在先前定义的边界内居中。

W3.org: If none of the three [top, bottom,height] are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solvethe equation under the extra constraint that the two margins get equal values.AKA: center the block vertically

这么看来， margin:auto似乎生来就是为绝对居中(Absolute Centering)设计的，所以绝对居中(Absolute Centering)应该都兼容符合标准的现代浏览器。

简而言之（TL;DR）：绝对定位元素不在普通内容流中渲染，因此margin:auto可以使内容在通过top: 0; left: 0; bottom: 0;right: 0;设置的边界内垂直居中。

二、负外边距 Negative Margins

块元素尺寸已知，外边距margin取负数，大小为width/height（不使用box-sizing: border-box时包括padding）的一半，再加上top: 50%; left: 50%

<span style="font-size:18px;"><style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	div{
		height: 100px;
		width: 100px;
		border:1px solid red;
		background: yellow;
		
	}
	.two{
		margin-top: -50px;
		margin-left: -50px;
		position: absolute;
		top: 50%;
		left: 50%;
	}
</style>
</head>   
<body>    
<div class='two'>
	我要垂直水平居中
</div></span>

当元素有padding值时，margin-left=（width+padding）/2，margin-top=（height+padding)/2;、

测试表明，这是唯一在IE6-IE7上也表现良好的方法。

优点：

1. 良好的跨浏览器特性，兼容IE6-IE7。

2. 代码量少。

缺点：

1. 不能自适应。不支持百分比尺寸和min-/max-属性设置。

2. 内容可能溢出容器。

3. 边距大小与padding,和是否定义box-sizing: border-box有关，计算需要根据不同情况。

三、变形 Transforms

这是最简单的方法，不仅能实现绝对居中同样的效果，也支持可变高度方式使用。内容块定义transform: translate(-50%,-50%)，还要加上top: 50%; left: 50%;

div{
		/* height: 100px; */
		/* width: 100px; */
		border:1px solid red;
		background: yellow;
	}
.three{
		-moz-transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		transform:translate(-50%,-50%);
		position: absolute;
		top: 50%;
		left: 50%;
	}



<div class='three'>
	我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中
</div>

优点：

1. 内容可变高度

2. 代码量少

缺点：

1. IE8不支持

2. 属性需要写浏览器厂商前缀

3. 可能干扰其他transform效果

4. 某些情形下会出现文本或元素边界渲染模糊的现象

四、表格单元 Table-Cell

总的说来这可能是最好的居中实现方法，因为内容块高度会随着实际内容的高度变化，浏览器对此的兼容性也好。最大的缺点是需要大量额外的标记，需要三层元素让最内层的元素居中。

.center{
           display:table;
}
.table-cell{
           display:table-cell;
           vertical-align:middle;
}
.center-block{
           width:50%;
           margin:0 auto;
}

<div class="center">
      <div class="table-cell">
            <div class="center-block">
            <!--conternt-->
            </div>
      </div>
</div>

优点：

1. 高度可变

2. 内容溢出会将父元素撑开。

3. 跨浏览器兼容性好。

缺点：

需要额外html标记

五、行内块元素 Inline-Block

很受欢迎的一种居中实现方式，基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。

优点：

1. 高度可变

2. 内容溢出会将父元素撑开。

3. 支持跨浏览器，也适应于IE7。

缺点：

1.需要一个容器

2.水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整。

3.内容块宽度不能超过容器的100% - 0.25em。

六、 Flexbox

这是CSS布局未来的趋势。Flexbox是CSS3新增属性，设计初衷是为了解决像垂直居中这样的常见布局问题。

记住Flexbox不只是用于居中，也可以分栏或者解决一些令人抓狂的布局问题

利用css3中的align-items和justify-content属性

为父元素设置align-items： center，justify-content：center，其所有子元素即可实现垂直居中对齐

html, body {
 height: 100%;
 margin: 0;
}
body {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  justify-content: center;
  display: -webkit-flex;
  display: flex;
}
</style>
</head>   
<body>    
<div class='three'>
	我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中我要垂直水平居中
</div>
</body>

效果图：

优点：

1.内容块的宽高任意，优雅的溢出。

2.可用于更复杂高级的布局技术中。

缺点：

1. IE8/IE9不支持。

2. Body需要特定的容器和CSS样式。

3. 运行于现代浏览器上的代码需要浏览器厂商前缀。

4. 表现上可能会有一些问题

lloyvhe

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实现垂直水平居中

一、绝对居中Absolute Centering需要声明元素高度 *{ margin: 0; padding: 0; } div{ height: 100px; width: 100px; border:1px solid red; background: yellow; } .one{ margin: auto; position:
复制链接

扫一扫