聊聊css水平垂直居中那些事

時間 2019-11-12

標籤聊聊 css 水平垂直居中那些欄目 CSS 简体版

原文原文鏈接

一、絕對定位居中(Absolute Centering)技術

咱們常常用margin:0 auto來實現水平居中，而一直認爲margin:auto不能實現垂直居中……實際上，實現垂直居中僅須要聲明元素高度和下面的CSS： css

.demo{width: 400px;height: 400px;background: #f00;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}

優勢： html

1.支持跨瀏覽器，包括IE8-IE10. web

2.無需其餘特殊標記，CSS代碼量少瀏覽器

3.支持百分比%屬性值和min-/max-屬性佈局

4.只用這一個類可實現任何內容塊居中測試

5.不管是否設置padding均可居中（在不使用box-sizing屬性的前提下） flex

6.內容塊能夠被重繪。 spa

7.完美支持圖片居中。設計

缺點： code

1.必須聲明高度（查看可變高度Variable Height）。

2.建議設置overflow:auto來防止內容越界溢出。（查看溢出Overflow）。

3.在Windows Phone設備上不起做用。

瀏覽器兼容性：

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

絕對定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均測試經過

二、負外邊距(Negative Margins)

這或許是當前最流行的使用方法。若是塊元素尺寸已知，能夠經過如下方式讓內容塊居中於容器顯示：

外邊距margin取負數，大小爲width/height（不使用box-sizing: border-box時包括padding，）的一半，再加上top: 50%; left: 50%;

.demo{width: 400px;height: 400px;background: #f00;position: absolute;top: 50%;left: 50%;margin: -200px 0 0 -200px;}

測試代表，這是惟一在IE6-IE7上也表現良好的方法。

優勢：

一、良好的跨瀏覽器特性，兼容IE6-IE7。

二、代碼量少。

缺點：

一、不能自適應。不支持百分比尺寸和min-/max-屬性設置。

二、內容可能溢出容器。

三、邊距大小與padding,和是否認義box-sizing: border-box有關，計算須要根據不一樣狀況。

三、變形（Transforms）

這是最簡單的方法，不近能實現絕對居中一樣的效果，也支持聯合可變高度方式使用。內容塊定義transform: translate(-50%,-50%)必須帶上瀏覽器廠商的前綴。

.demo{background: #f00;width: 400px;position: absolute;margin: auto;top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,50%);transform: translate(-50%,-50%);}

優勢：

1.內容可變高度

2.代碼量少

缺點：

1.IE8不支持

2.屬性須要寫瀏覽器廠商前綴

3.可能干擾其餘transform效果

4.某些情形下會出現文本或元素邊界渲染模糊的現象

四、Flexbox

這是CSS佈局將來的趨勢。Flexbox是CSS3新增屬性，設計初衷是爲了解決像垂直居中這樣的常見佈局問題。記住Flexbox不僅是用於居中，也能夠分欄或者解決一些使人抓狂的佈局問題

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>X軸翻轉</title>
		<style type="text/css">
		*{
			margin: 0;padding:0;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		html,
		body {
		  height: 100%;
		}
		body {
		  display:flex;
		  flex-direction:row;
		  justify-content:center;
		  align-items:center; 
		}
		</style>
	</head>
	<body>
		<img src="images/pro01.png" />
	</body>
</html>

優勢：

1.內容塊的寬高任意，優雅的溢出。

2.可用於更復雜高級的佈局技術中。

缺點：

1.IE8/IE9不支持。

2.Body須要特定的容器和CSS樣式。

3.運行於現代瀏覽器上的代碼須要瀏覽器廠商前綴。

4.表現上可能會有一些問題