css居中的方法汇总

css的居中问题说难不难，说简单也不简单，主要原因是其类型都变，在实际应用中可能会将各种情况相互混淆。所以，有个汇总岂不是妙哉？来吧，接受我爱的洗礼吧。

本文内容有很大一部分借鉴了国外牛人的一篇博客，目前国内应该也还没得翻译吧（想想我还是有点激动的呢，还好英语不是战五渣）。装逼装完了，进入正题。

css的居中问题可以分为一下几类：水平居中，垂直居中，水平+垂直。但是这三类下面的细的情况也还是比杂的，莫慌，让我用诙（wei）谐（suo）幽（wu）默（qu）的语言为你慢慢讲解.

一.水平居中

(一)需要居中的元素为行内元素（inline-element）：利用text-align:center可以读对文本进行居中。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>安静</title>
</head>
<style>
body {
  background: #f06d06;
}
  header, nav {
  text-align: center;
  background: white;
  margin: 20px 0;
  padding: 10px;
}

a {
  text-decoration: none;
  background: #333;
  border-radius: 5px;
  color: white;
  padding: 3px 8px;}
</style>
<body >
    <header>
  This text is centered.
</header>

<nav role='安静'>
  <a href="#0">轨迹</a>
  <a href="#0">七里香</a>
  <a href="#0">淘汰</a>
  <a href="#0">搁浅</a>
</body>
</html>

（二）需要居中的元素为块级元素（block-level element）。给改块级元素的外边距margin赋值为margin：0 auto；并且需要注意的是如果没有给该块级元素的width给一个常数值的话，该块级元素在水平方向上会布满整个浏览器的哟。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>安静</title>
</head>
<style>
body {
  background: #f06d06;
}

main {
  background: white;
  margin: 20px 0;
  padding: 10px;
}

center {
  margin: 0 auto;
  width: 200px;  /*attention please*/
  background: black;
  padding: 20px;
  color: white;}
</style>
<body >
    

<main>
  <center> 哎哟，不错哟！</center>
</main>


</body>
</html>

以上的代码在父级元素的width属性数值改变的情况下依然能够正常的居中，当然你可不能手痒的把main中的width设置的比center的width小，这样什么办法都没发居中了，因为main已经遭撑死逑了。你也可以在main的样式中添加margin：0 auto；这样main这个块也就完美的居中了赛，多棒。

那如果有多个块级元素怎么办？让他们打一架？当然不行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>安静</title>
</head>
<style>
body {
  background: #f06d06;
  font-size: 80%;
}

main {
  background: white;
  margin: 20px 0;
  padding: 10px;
}

main div {
  background: black;
  color: red;
  padding: 15px;
  max-width: 125px;
  margin: 5px;
}

.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
  color: blue;
}

.flex-center {
  display: flex;
  justify-content: center;
}
</style>
<body >
<main class="inline-block-center">
  <div>左</div>
  <div>中</div>
  <div>右</div>
  <div>右</div>
  </main>

<main class="flex-center">
 <div>左</div>
 <div>中</div>
 <div>右</div>
</main>
</body>
</html>

显然，上面的代码提供了两种居中的方法，第一种比较复杂：首先将inline-block-center设为居中，然后在将其子元素设为相左对齐，同时又因为将inline-block-center div设为了inline-block(行内元素)，行内元素有一个显著的特点就是其不会像块级元素那样霸道的抢占一整行，他会温柔的跟你在那一行向左一次排列，所以后面的那几个div就依次排在了其后面。第二种方法比较简单，但好像只有火狐和谷歌浏览器支持呢，display：flex的意思是弹性布局，这里能实现居中的原因就是弹性布局的自带光环了。。（弹性布局的详情请点双击我）

二.垂直居中(妈的，终于到了第二部分了，感觉圣体被掏空呀。)

垂直居中我觉得要比水平居中要难点（不要问我怎么知道的？我就是知道）

（一）有时候我们将元素的上下距离调成相等的就可以使他们垂直居中了，让我并没有什么卵用，当他们加起来的长度和大于浏览器的最大宽度是这个方法就（喔霍）没得用了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>安静</title>
</head>
<style>
body {
  background: #f06d06;
  font-size: 80%;
}

main {
  background: white;
  margin: 20px 0;
  padding: 50px;
}

main a {
  background: black;
  color: white;
  padding: 40px 30px;
  text-decoration: none;
}
</style>
<body >
<main>
  <a href="#0">我是世界上最帅的人，没错就是我，就问你服不服</a>
  <a href="#0">不服</a>
  <a href="#0">不服</a>
  <a href="#0">不服</a>
</main>
</body>
</html>

你可以试下将“我是世界上最帅的人重复几遍就可以看到明显的不好的状态了”类似的还可以通过设置height与line-height相等的方法来实现居中，但是这连个方法是真的渣，没什么实际的意义，希望各位不要贪小便宜哟。

（二）利用vertical-align与表格相结合实现居中：在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解，如果给一个表格的td加一个 vertical-align:middle的样式，表格里面的内容会垂直居中，同样的如果给一个vertical-align:bottom就会底部对齐，如果给一个vertical-align:top就会顶部对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>安静</title>
</head>
<style>
body {
  background: #f06d06;
  font-size: 80%;
}

table {
  background: white;
  width: 240px;
  border-collapse: separate;
  margin: 20px;
  height: 250px;
}

table td {
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  /* default is vertical-align: middle; */
}

.center-table {
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}
.center-table p {
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}
</style>
<body >
<table>
  <tr>
    <td>
      I'm vertically centered multiple lines of text in a real table cell.
    </td>
  </tr>
</table>

<div class="center-table">
  <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>
</body>
</html>

当表格的方法不能正常执行时我们可以利用flexbox来实现，flexbox又涉及到了一个单独的知识点了（详情请双击我）代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>安静</title>
</head>
<style>
body {
  background: #f06d06;
  font-size: 80%;
}

div {
  background: white;
  width: 240px;
  margin: 20px;
}

.flex-center {
  background: black;
  color: white;
  border: 10px solid white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 200px;
  resize: vertical;
  overflow: auto;
}
.flex-center p {
  margin: 0;
  padding: 20px;
}
</style>
<body >
<div class="flex-center">
  <p>I'm vertically centered multiple lines of text in a flexbox container.</p>
</div>
</body>
</html>

（三）对块级元素进行垂直居中

当块级元素的高度改变时：块级元素的高度改变的原因有很多，浏览器的大小改变，文本本身长短的改变等等。。。。

我们首先来看看我们知道块级元素的高度时的情况，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>安静</title>
</head>
<style>
body {
  background: #f06d06;
  font-size: 80%;
}

main {
  background: white;
  height: 300px;
  margin: 20px;
  width: 300px;
  position: relative;
  resize: vertical;
  overflow: auto;
}

　main div {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  height: 100px;
  margin-top: -70px;
  background: black;
  color: white;
  padding: 20px;
}
</style>
<body >
<main>
  <div>
   哎哟，不错哟，你看我居中了呢！
  </div>
  </main>
</body>
</html>

该方法只是利用了简单的加减算法来将块级元素巧合性的居中了，没有什么需要讲解的。

当块级元素的高度会改变时：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>安静</title>
</head>
<style>
body {
  background: #f06d06;
  font-size: 80%;
}

main {
  background: white;
  height: 300px;
  margin: 20px;
  width: 300px;
  position: relative;
  resize: vertical;
  overflow: auto;
}

main div {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  background: black;
  color: white;
  padding: 20px;
  transform: translateY(-50%);
  resize: vertical;
  overflow: auto;}
</style>
<body >


<main>
  
  <div>
    欢迎来到重庆欢迎来到重庆
  </div>
</main>
</body>
</html>

注意以上两段代码的差别，是什么原因导致了高度在改变后还能完美的居中。

（四）究极大法：flexbox。flex是一个单独的知识点，我也不是很懂（详情请双击我），不过贴心的我还是会把代码贴出来的赛

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>安静</title>
</head>
<style>
body {
  background: #f06d06;
  font-size: 80%;
}

main {
  background: white;
  height: 300px;
  width: 200px;
  padding: 20px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  resize: vertical;
  overflow: auto;
}

main div {
  background: black;
  color: white;
  padding: 20px;
  resize: vertical;
  overflow: auto;
}
</style>
<body >


<main>
  
  

<main>
  
  <div>
     I'm a block-level element with an unknown height, centered vertically within my parent.
  </div>
  
</main>


</body>
</html>

本文主要参考了国外友人的一片博客：https://css-tricks.com/centering-css-complete-guide/ 如有侵权行为，请联系我删除。言微力薄，还请多多指教。

posted @ 2016-10-25 22:29 安静lf 阅读(141) 评论(0) 收藏举报

刷新页面返回顶部

安静lf

css居中的方法汇总

公告