水平垂直居中方案与flexbox布局

你的名字 2022-07-12 03:23 222阅读 0赞

行内元素的水平居中

要实现行内元素（<span>、<a>等）的水平居中，只需把行内元素包裹在块级父层元素（<div>、<li>、<p>等）中，并且在父层元素CSS设置如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>垂直居中Demo</title>
    <style type="text/css">
    #container {
    	text-align: center;
    	background-color: #666;
    }
    #center {
    	color: #fff;
    	font-size: 20px;
    }
    </style>
    </head>
    <body>
    <div id='container'> <span id = 'center'>#center</span> </div>
    </body>
    </html>

并且适用于文字，链接，及其inline或者inline-block、inline-table和inline-flex。  
![图片][20170209083206298]

块状元素的水平居中

要实现块状元素（display:block）的水平居中，我们只需要将它的左右外边距margin-left和margin-right设置为auto，即可实现块状元素的居中，要水平居中的块状元素CSS设置如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>垂直居中Demo</title>
    <style type="text/css">
    #container {
    	height: 100px;
    	background: #d6d6d6;
    }
    #center {
    	margin: auto;
    	width: 100px;
    	height: 100px;
    	background-color: #666;
    	color: #fff;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	font-weight: bold;
    	font-size: 18px;
    }
    </style>
    </head>
    <body>
    <div id='container'>
      <div id = 'center'>#center</div>
    </div>
    </body>
    </html>

![图片][20170209083300565]  
 多个块状元素的水平居中

要实现多个水平排列的块状元素的水平居中，传统的方法是将要水平排列的块状元素设为display:inline-block，然后在父级元素上设置text-align:center，达到与上面的行内元素的水平居中一样的效果。

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>垂直居中Demo</title>
    <style type="text/css">
    #container {
    	height: 100px;
    	background: #d6d6d6;
    }
    #center {
    	margin: auto;
    	width: 100px;
    	height: 100px;
    	background-color: #666;
    	color: #fff;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	font-weight: bold;
    	font-size: 18px;
    }
    </style>
    </head>
    
    <body>
    <div id='container'>
      <div id = 'center'>#center</div>
      <div id = 'center'>#center</div>
      <div id = 'center'>#center</div>
    </div>
    </body>
    </html>

![图片][20170209083357770]

已知高度宽度元素的水平垂直居中

法一.

绝对定位与负边距实现。

利用绝对定位，将元素的top和left属性都设为50%，再利用margin边距，将元素回拉它本身高宽的一半，实现垂直居中。

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>垂直居中Demo</title>
    <style type="text/css">
    #container {
    	background: #d6d6d6;
    	height: 300px;
    	position: relative;
    }
    #center {
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	margin: -50px 0 0 -50px;
    	width: 100px;
    	height: 100px;
    	background-color: #666;
    	color: #fff;
    	font-weight: bold;
    	font-size: 18px;
    }
    </style>
    </head>
    
    <body>
    <div id='container'>
      <div id = 'center'>#center</div>
    </div>
    </body>
    </html>

![图片][20170209083438114]

法二.

绝对定位与margin。

这种方法也是利用绝对定位与margin，但是无需知道被垂直居中元素的高和宽。

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>垂直居中Demo</title>
    <style type="text/css">
    #container {
    	position: relative;
    	height: 300px;
    	background: #d6d6d6;
    }
    #center {
    	position: absolute;
    	margin: auto;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	right: 0;
    	width: 100px;
    	height: 100px;
    	background-color: #666;
    	color: #fff;
    	font-weight: bold;
    	font-size: 18px;
    }
    </style>
    </head>
    
    <body>
    <div id='container'>
      <div id = 'center'>#center #center #center #center</div>
    </div>
    </body>
    </html>

未知高度和宽度元素的水平垂直居中

法一. 当要被居中的元素是inline或者inline-block元素

当要被居中的元素是inline或者inline-block的时候，可以巧妙的将父级容器设置为display:table-cell，配合text-align:center和vertical-align:middle即可以实现水平垂直居中。

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>垂直居中Demo</title>
    <style type="text/css">
    #container {
    	width: 600px;
    	height: 300px;
    	background: #d6d6d6;
    	display: table-cell;
    	text-align: center;
    	vertical-align: middle;
    }
    #center {
    	background-color: #666;
    	color: #fff;
    	font-weight: bold;
    	font-size: 18px;
    }
    </style>
    </head>
    
    <body>
    <div id='container'> <span id='center'>#center</span> </div>
    </body>
    </html>

![图片][20170209083553694]

法二. Css3显威力

利用Css3的transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>垂直居中Demo</title>
    <style type="text/css">
    #container {
    	height: 300px;
    	background: #d6d6d6;
    	position: relative;
    }
    #center {
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    	width: 100px;
    	height: 100px;
    	background-color: #666;
    	color: #fff;
    	font-weight: bold;
    	font-size: 18px;
    }
    </style>
    </head>
    
    <body>
    <div id='container'>
      <div id = 'center'>#center</div>
    </div>
    </body>
    </html>

![图片][20170209083649917]

法三. flex布局轻松解决

使用flex布局，无需绝对定位等改变布局的操作，可以轻松实现元素的水平垂直居中。

核心代码如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>垂直居中Demo</title>
    <style type="text/css">
    #container {
    	height: 300px;
    	background: #d6d6d6;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    }
    #center {
    	width: 100px;
    	height: 100px;
    	background-color: #666;
    	color: #fff;
    	font-weight: bold;
    	font-size: 18px;
    	display: flex;/*这个写在这只是为了#center这几个字的垂直居中*/
    	justify-content: center;
    	align-items: center;
    }
    </style>
    </head>
    
    <body>
    <div id='container'>
      <div id = 'center'>#center</div>
    </div>
    </body>
    </html>

![图片][20170209083731730]

CSS3的transform和flex固然好用，但在项目的实际运用中必须考虑兼容问题，大量的hack代码可能会导致得不偿失。

某些浏览器仍需使用前缀写法:

.flexboxtest\{

display: flex;

display: -webkit-flex; //Safari仍旧需要使用特定的浏览器前缀

[20170209083206298]: /images/20220711/4a8f9d9b1b4e4e978029d4b14df89d52.png
[20170209083300565]: /images/20220711/acfa43126cbe48c2bb210887d92ae17c.png
[20170209083357770]: /images/20220711/580ce7dfacd648c7966510758f01f974.png
[20170209083438114]: /images/20220711/aa8a27e933104eae971f02d68eeb0037.png
[20170209083553694]: /images/20220711/b3c377b360c541879f11774d37b8beb4.png
[20170209083649917]: /images/20220711/108a4ddc7c594b84822a54aa5a061a6e.png
[20170209083731730]: /images/20220711/63507a78e4b641caa1a2b7a262d9d6cb.png