html - Align vertically using CSS 3

Question

Ask a Question

Welcome To Ask or Share your Answers For Others

html - Align vertically using CSS 3

asked Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

With CSS 3, are there any way to vertically align an block element? Do you have an example? Thank you.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

394 views

1 Answer

深蓝 · Answer 1 · 2021-10-17T00:13:16+0000

Was looking at this problem recently, and tried:

HTML:

<body>
    <div id="my-div"></div>
</body>

CSS:

#my-div {               
    position: absolute;
    height: 100px;
    width: 100px;    
    left: 50%;
    top: 50%;
    background: red;
    transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

Here's the Fiddle:

http://jsfiddle.net/sTcp9/6/

It even works when using "width/height: auto", in the place of fixed dimensions. Tested on the latest versions on Firefox, Chrome, and IE (* gasp *).

Categories

html - Align vertically using CSS 3

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags