Table of Contents
 水平居中 
  内联元素(inline or inline-*)居中?
  块级元素(block level)居中?
  如果有很多块级元素呢?
 垂直居中
  垂直居中在CSS中有点棘手
  它是一行的吗?
  它是多行的?
  块级元素(block level)垂直居中?
 同时水平和垂直居中
  元素有固定的宽度和高度
  元素的宽度高度未知
Home Web Front-end HTML Tutorial CSS垂直水平完全居中手册_html/css_WEB-ITnose

CSS垂直水平完全居中手册_html/css_WEB-ITnose

Jun 24, 2016 am 11:17 AM

居中一直是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% );

}

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Is HTML easy to learn for beginners? Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

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.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

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.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

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

What is an example of a starting tag in HTML? What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM

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

How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? Apr 05, 2025 am 06:15 AM

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...

How to implement adaptive layout of Y-axis position in web annotation? How to implement adaptive layout of Y-axis position in web annotation? Apr 04, 2025 pm 11:30 PM

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: Essential Tools for Web Developers HTML, CSS, and JavaScript: Essential Tools for Web Developers Apr 09, 2025 am 12:12 AM

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.

See all articles