如何实现CSS居中？?CSS居中常用方法_html/css

来源：http://www.ido321.com/824.html

一、水平居中

1、内联元素居中：相对父级块级元素居中对齐

1: .center-children { 登录后复制 2: text-align: center; 登录后复制 3: } 登录后复制 登录后复制 登录后复制 登录后复制 登录后复制

2、块级元素居中：设置margin-left和margin-right为auto让它居中（同时还要设置width，否则它就会承满整个容器，无法看出居中效果）

1: .center-me { 登录后复制 2: margin: 0 auto; 登录后复制 3: } 登录后复制 登录后复制 登录后复制 登录后复制 登录后复制

如果有很多块级元素需要水平居中成一行，最好使用一个不同的display类型。这是一个使用inline-block和flex的例子。

演示地址：http://jsfiddle.net/Web_Code/5fvrwwk1/embedded/result/

1: 登录后复制 2: 3: I'm an element that is block-like with my siblings and we're centered in a row. 登录后复制 4: 登录后复制 登录后复制 5: 6: I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do. 登录后复制 7: 登录后复制 8: 9: I'm an element that is block-like with my siblings and we're centered in a row. 登录后复制 10: 登录后复制 11: 登录后复制 12: 登录后复制 13: 14: I'm an element that is block-like with my siblings and we're centered in a row. 登录后复制 15: 登录后复制 16: 17: I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do. 登录后复制 18: 登录后复制 19: 20: I'm an element that is block-like with my siblings and we're centered in a row. 登录后复制 21: 登录后复制 22: 登录后复制 css:

1: body { 登录后复制 登录后复制 登录后复制 2: background: #f06d06; 登录后复制 登录后复制 登录后复制 3: font-size: 80%; 登录后复制 登录后复制 登录后复制 4: } 登录后复制 登录后复制 登录后复制 登录后复制 登录后复制 5: main { 登录后复制 登录后复制 6: background: white; 登录后复制 登录后复制 登录后复制 7: margin: 20px 0; 登录后复制 8: padding: 10px; 登录后复制 9: } 登录后复制 登录后复制 登录后复制 10: main div { 登录后复制 11: background: black; 登录后复制 12: color: white; 登录后复制 13: padding: 15px; 登录后复制 14: max-width: 125px; 登录后复制 15: margin: 5px; 登录后复制 16: } 登录后复制 登录后复制 17: .inline-block-center { 登录后复制 18: text-align: center; 登录后复制 19: } 登录后复制 20: .inline-block-center div { 登录后复制 21: display: inline-block; 登录后复制 22: text-align: left; 登录后复制 23: } 登录后复制 登录后复制 24: .flex-center { 登录后复制 25: display: flex; 登录后复制 26: justify-content: center; 登录后复制 27: } 登录后复制 二、垂直居中

1、内联元素：设置相等的上下padding，或者利用line-height

1: .link { 登录后复制 2: padding-top: 30px; 登录后复制 3: padding-bottom: 30px; 登录后复制 4: } 登录后复制 登录后复制 登录后复制 登录后复制 登录后复制 文本不会换行的情况下，可以使用line-height，让其与height相等去对齐文本。

1: .center-text-trick { 登录后复制 2: height: 100px; 登录后复制 3: line-height: 100px; 登录后复制 4: white-space: nowrap; 登录后复制 5: } 登录后复制

多行的文本也可以利用上下等padding的方式也可以让多行居中，但是如果这方法没用，你可以让这些文字的容器按table cell模式显示，然后设置文字的vertical-align属性对齐，

演示地址： http://jsfiddle.net/Web_Code/5fvrwwk1/1/embedded/result/

html:

1: 登录后复制 2: 3: 4: I'm vertically centered multiple lines of text in a real table cell. 登录后复制 5: 登录后复制 6: 登录后复制 7: 登录后复制 8: 9: I'm vertically centered multiple lines of text in a CSS-created table layout.

登录后复制 10: 登录后复制 css

1: body { 登录后复制 登录后复制 登录后复制 2: background: #f06d06; 登录后复制 登录后复制 登录后复制 3: font-size: 80%; 登录后复制 登录后复制 登录后复制 4: } 登录后复制 登录后复制 登录后复制 登录后复制 登录后复制 5: table { 登录后复制 6: background: white; 登录后复制 登录后复制 登录后复制 7: width: 240px; 登录后复制 8: border-collapse: separate; 登录后复制 9: margin: 20px; 登录后复制 10: height: 250px; 登录后复制 11: } 登录后复制 12: table td { 登录后复制 13: background: black; 登录后复制 14: color: white; 登录后复制 15: padding: 20px; 登录后复制 16: border: 10px solid white; 登录后复制 17: /* default is vertical-align: middle; */ 登录后复制 18: } 登录后复制 19: .center-table { 登录后复制 20: display: table; 登录后复制 21: height: 250px; 登录后复制 22: background: white; 登录后复制 23: width: 240px; 登录后复制 24: margin: 20px; 登录后复制 25: } 登录后复制 26: .center-table p { 登录后复制 27: display: table-cell; 登录后复制 28: margin: 0; 登录后复制 29: background: black; 登录后复制 30: color: white; 登录后复制 31: padding: 20px; 登录后复制 32: border: 10px solid white; 登录后复制 33: vertical-align: middle; 登录后复制 34: } 登录后复制

2、块级元素

若元素有固定高度，可以这样垂直居中

1: .parent { 登录后复制 登录后复制 登录后复制 2: position: relative; 登录后复制 登录后复制 登录后复制 3: } 登录后复制 登录后复制 登录后复制 登录后复制 登录后复制 4: .child { 登录后复制 登录后复制 登录后复制 5: position: absolute; 登录后复制 登录后复制 登录后复制 6: top: 50%; 登录后复制 登录后复制 登录后复制 7: height: 100px; 登录后复制 登录后复制 8: margin-top: -50px; /* 如果没有使用: border-box; 的盒子模型则需要设置这个 */ 登录后复制 9: } 登录后复制 登录后复制 登录后复制 如果不知道元素高度，则这样

1: .parent { 登录后复制 登录后复制 登录后复制 2: position: relative; 登录后复制 登录后复制 登录后复制 3: } 登录后复制 登录后复制 登录后复制 登录后复制 登录后复制 4: .child { 登录后复制 登录后复制 登录后复制 5: position: absolute; 登录后复制 登录后复制 登录后复制 6: top: 50%; 登录后复制 登录后复制 登录后复制 7: transform: translateY(-50%); 登录后复制 8: } 登录后复制 也可以使用flexbox

1: 登录后复制 2: 3: I'm a block-level element with an unknown height, centered vertically within my parent. 登录后复制 4: 登录后复制 登录后复制 5: 登录后复制

1: body { 登录后复制 登录后复制 登录后复制 2: background: #f06d06; 登录后复制 登录后复制 登录后复制 3: font-size: 80%; 登录后复制 登录后复制 登录后复制 4: } 登录后复制 登录后复制 登录后复制 登录后复制 登录后复制 5: main { 登录后复制 登录后复制 6: background: white; 登录后复制 登录后复制 登录后复制 7: height: 300px; 登录后复制 8: width: 200px; 登录后复制 9: padding: 20px; 登录后复制 10: margin: 20px; 登录后复制 11: display: flex; 登录后复制 12: flex-direction: column; 登录后复制 13: justify-content: center; 登录后复制 14: resize: vertical; 登录后复制 15: overflow: auto; 登录后复制 16: } 登录后复制 登录后复制 17: main div { 登录后复制 18: background: black; 登录后复制 19: color: white; 登录后复制 20: padding: 20px; 登录后复制 21: resize: vertical; 登录后复制 22: overflow: auto; 登录后复制 23: } 登录后复制 登录后复制

三、同时水平和垂直居中

1、元素有固定高度和宽度：先绝对居中，然后上移和左移50%的宽度即可

1: //这种方案有极好的跨浏览器支持。 登录后复制 2: .parent { 登录后复制 3: position: relative; 登录后复制 4: } 登录后复制 登录后复制 登录后复制 登录后复制 登录后复制 5: .child { 登录后复制 6: width: 300px; 登录后复制 7: height: 100px; 登录后复制 登录后复制 8: padding: 20px; 登录后复制 9: position: absolute; 登录后复制 10: top: 50%; 登录后复制 11: left: 50%; 登录后复制 12: margin: -70px 0 0 -170px; 登录后复制 13: } 登录后复制

2、元素的高度和宽度未知或可变的：使用transofrm属性在两个方向都平移负50%

1: .parent { 登录后复制 登录后复制 登录后复制 2: position: relative; 登录后复制 登录后复制 登录后复制 3: } 登录后复制 登录后复制 登录后复制 登录后复制 登录后复制 4: .child { 登录后复制 登录后复制 登录后复制 5: position: absolute; 登录后复制 登录后复制 登录后复制 6: top: 50%; 登录后复制 登录后复制 登录后复制 7: left: 50%; 登录后复制 8: transform: translate(-50%, -50%); 登录后复制 9: } 登录后复制 登录后复制 登录后复制

如何实现CSS居中？?CSS居中常用方法_html/css_WEB-ITnose