CSS垂直水平完全居中手册_html/css_WEB-ITnose
居中一直是CSS中被抱怨的典型。为什么实现起来这么辛苦?所以有人被嘲笑。我觉得问题不是没有办法做到,只是视情况而定,有很多不同方式,但是很难弄清楚应该用何种方式。
因此我写了这篇文章,希望能把他变得容易点。
水平居中
内联元素(inline or inline-*)居中?
你可以让他相对父级块级元素居中对齐
1
2
3
.center-children {
text-align : center ;
}
块级元素(block level)居中?
你可以通过设置margin-left和margin-right为auto让它居中(同时还要设置width,否则它就会承满整个容器,无法看出居中效果),如。
1
2
3
.center-me {
margin : 0 auto ;
}
如果有很多块级元素呢?
如果你有很匀块级元素需要水平居中成一行,你最好使用一个不同的display类型。这是一个使用inline-block和flex的例子。
在线示例: http://jsfiddle.net/ourjs/0b6b7wt8/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
I'm an element that is block-like with my siblings and we're centered in a row.
div >
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.
div >
I'm an element that is block-like with my siblings and we're centered in a row.
div >
main >
I'm an element that is block-like with my siblings and we're centered in a row.
div >
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.
div >
I'm an element that is block-like with my siblings and we're centered in a row.
div >
main >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
body {
background : #f06d06 ;
font-size : 80% ;
}
main {
background : white ;
margin : 20px 0 ;
padding : 10px ;
}
main div {
background : black ;
color : white ;
padding : 15px ;
max-width : 125px ;
margin : 5px ;
}
.inline-block- center {
text-align : center ;
}
.inline-block- center div {
display : inline- block ;
text-align : left ;
}
.flex- center {
display : flex;
justify- content : center ;
}
垂直居中
垂直居中在CSS中有点棘手
内联元素(inline or inline-*)居中,像文本和链接那样的?
它是一行的吗?
有时侯元素可以表现像垂直居中,只是因为它们有相等的上下padding
1
2
3
4
.link {
padding-top : 30px ;
padding-bottom : 30px ;
}
如果padding因为某些原因不能用,而且文本不会换行的情况下,你可以使用line-height,让其与height相等去对齐文本。
1
2
3
4
5
.center-text-trick {
height : 100px ;
line-height : 100px ;
white-space : nowrap ;
}
它是多行的?
上下等padding的方式也可以让多行居中,但是如果这方法没用,你可以让这些文字的容器按table cell模式显示,然后设置文字的vertical-align属性对齐,就像talbe那样
在线演示: http://jsfiddle.net/ourjs/0fn2u4rc/
1
2
3
4
5
6
7
8
9
10
I'm vertically centered multiple lines of text in a real table cell.
td >
tr >
table >
I'm vertically centered multiple lines of text in a CSS-created table layout. p >
div >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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 ;
}
块级元素(block level)垂直居中?
你知道元素的高度吗?
出于很多方面的原因,不知道网页布局的高度是相当普遍的。
但是如果你的布局有一个固定高度,你就可以这样垂直居中:
1
2
3
4
5
6
7
8
9
.parent {
position : relative ;
}
.child {
position : absolute ;
top : 50% ;
height : 100px ;
margin-top : -50px ; /* 如果没有使用: border-box; 的盒子模型则需要设置这个 */
}
元素的高度是未知的
尽管未知,但你仍有可能向上推移50%的宽度
在线演示: http://jsfiddle.net/ourjs/9sLf7p56/
1
2
3
4
5
6
7
8
.parent {
position : relative ;
}
.child {
position : absolute ;
top : 50% ;
transform: translateY( -50% );
}
你可以使用flexbox吗?
这并不奇怪,使用flexbox会容易非常多
1
2
3
4
5
I'm a block-level element with an unknown height, centered vertically within my parent.
div >
main >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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 ;
}
同时水平和垂直居中
元素有固定的宽度和高度
如果元素的宽度和高度是固定的,你需要先绝对居中,然后上移和左移50%的宽度即可,这种方案有极好的跨浏览器支持。
1
2
3
4
5
6
7
8
9
10
11
12
13
.parent {
position : relative ;
}
.child {
width : 300px ;
height : 100px ;
padding : 20px ;
position : absolute ;
top : 50% ;
left : 50% ;
margin : -70px 0 0 -170px ;
}
元素的宽度高度未知
如果你不知道高度和宽度(可变的),你可以使用transofrm属性在两个方向都平移负50%
1
2
3
4
5
6
7
8
9
10
.parent {
position : relative ;
}
.child {
position : absolute ;
top : 50% ;
left : 50% ;
transform: translate( -50% , -50% );
}

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
