CSS tutorials A variety of solutions that are centered horizontally and vertically Vertical-align is a good attribute, but this attribute was initially for the cell of the table. Of course, this property does not work on block-level elements, but it works on inline elements such as spans (this time, the property is set to a negative element content to move down, positive values move up).
The following is a more professional, vertically centered, centralized solution. Recorded here for inspection.
1, single line vertically centered
The text is vertically centered in the layer Vertical-align property is not available. We have a more ingenious way here: the height of the set height is the same height as the line-height!
Example source code [www.jzread.com] <div style= "line-height:500px;height:500;" > 2, the level of the center
Set div width Less than the width of the parent div, set margin:0 auto;
Example source code [www.jzread.com] #parentdiv { width:500px; } #childdiv { width:200px; margin:0 Auto; } 3, the level of text horizontally centered
In Childdiv CSS plus text-align:center;
Example source code [www.jzread.com] #parentdiv { width:500px; } #childdiv { width:200px; margin:0 Auto; Text-align:center; } 4, the DIV layer vertically centered
example source code [www.jzread.com] <div style= "Width:275px;height:375px;border:solid red;" <div style= "background:green;height:375px; width:275px; position:relative; Display:table-cell; Vertical-align:middle; " <div style= Background:red;position:static;position:absolute9; top:50%; " <div style= "background:blue;position:relative; Top:-50%; www.jzread.com </div> </div> </div> </div> 5, the div layer is centered vertically horizontally, and the English line wraps
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.