CSS vertical center, css vertical center

CSS vertical center, css vertical center

1. Vertical center: Single Row in-Row Element Solution

Center element: the line element of a single row, that is, the inline or inline-* type element, such as text or link.

Solution: Set the height and inline-height of the element in the row to the height of its parent element.

HTML

<Div id = "container">
<A href = "#"> hello, gbtags. comhello, gbtags. comhello, gbtags.com </a>
</Div>

CSS

# Container {
Background: #222;
Height: 200px;
}
A {
/* Height: 200px ;*/
Line-height: 200px;
Color: # fff;
}

 

2. Vertical center: multi-row in-Row Element Solution

Center element: Intra-Row Element of multiple rows

Solution: Combine the display: table-cell and vertical-align: middle attributes to define the parent element of the element to be centered.

HTML

<Div id = "container">
<A href = "#">
Lorem ipsum dolor sit amet, please wait elit. Adjust blanditiis optio accusamus quia sapiente at labore within quasi veritatis possimus quod nihil aliquam vilsaepe rem quas. Ratione eligendi!
</A>
</Div>

CSS

# Container {
Width: 300px;
Height: 300px;
Background: #222;
/* Vertical center of the following attributes */
Display: table-cell;
Vertical-align: middle;
}
A {
Color: # fff;
}

 

3. Vertical center: Block Element Solution with known height

Center element: block-level element, such as div

Solution: Set the element to be centered to absolute positioning, and set its margin-top value to a negative value half of the height of the element to be centered.

HTML

<Div class = "item">
</Div>

CSS

Div {
Width: 100px;
Height: 100px;
Background: #222;
}
/* The following is the center code */
. Item {
Position: absolute;
Top: 50%;
Margin-top:-50px;
Padding: 0;/* If padding is set, calculate the value of margin-top */
}

 

4. Vertical center: Unknown height Block Element Solution

Center element: block-level elements, such as div, but do not know its height

Solution: Use the transform attribute of CSS3

HTML

<Div class = "item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet sint repellendus AB aut quisquam eligendi est in deleniti.
</Div>

CSS

Div {
Width: 150px;
Background: #222;
Color: # fff;
}
/* The following is the center code */
. Item {
Position: absolute;
Top: 50%;
Transform: Maid (-50% );
}

 

5. horizontal vertical center: Element Solution with known width and height

Center type: center vertically and horizontally (if you know the height and width of the element)

Solution: Set absolute element positioning and set margin-top (height/2) and margin-left to negative values (width/2 ).

HTML

<Div class = "item">
</Div>

CSS

Div {
Width: 150px;
Height: 250px;
Background: #222;
Color: # fff;
}
/* The following is the center code */
. Item {
Position: absolute;
Top: 50%;
Left: 50%;
Margin-top:-125px;
Margin-left:-75px;
}

 

6. horizontal vertical center: Solutions for unknown element height and width

Center type: center horizontally and vertically (provided that the width and height of the element are unknown)

Solution: Set this element to absolute positioning and use the transform attribute of CSS3.

HTML

<Div class = "item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nostrum quaerat debitis.
</Div>

CSS

Div {
Background: #222;
Color: # fff;
}
/* The following is the center code */
. Item {
Position: absolute;
Top: 50%;
Left: 50%;
Transform: translate (-50%,-50% );
}

 

VII. horizontal vertical center: using flex Layout

Solution: Set the flex layout and set the justify-content and align-items attributes of the parent element of the center element to center.

HTML

<Div class = "parent">
<Div class = "item"> </div>
</Div>

CSS

. Item {
Width: 100px;
Height: 100px;
Background: #222;
}
/* The following is the center code */
. Parent {
Display: flex;
Justify-content: center;
Align-items: center;
/* You need to set height to view the vertical center effect */
Background: # ccc;
Height: 300px;
}

 

How does DIV + CSS align text vertically?

When talking about this question, someone may ask if CSS does not have the vertical-align attribute to set vertical center? Even some Browsers Do not support CSS Hack technology! So here I want to say that CSS does have the vertical-align attribute, but it only takes effect for elements with the valign attribute in (X) HTML elements, for example, <td>, <th>, and <caption> in table elements, but elements like <div> and <span> do not have the valign feature, therefore, using vertical-align does not work for them.

CSS webpage layout DIV horizontal center Methods

1. Vertical center of a single row

If a container contains only one line of text, it is relatively easy to center it. We only need to set its actual height to be equal to the line-height of its row. For example:

Code snippets provided by imoker.cn (imoke:

Div {
Height: 25px;
Line-height: 25px;
Overflow: hidden;
}
This code is simple. The overflow: Den den setting is used later to prevent the content from exceeding the container or generating automatic line breaks, so that the vertical center effect cannot be achieved.

Code snippets provided by imoker.cn (imoke:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "www.w3.org/..al.dtd">
<Html xmlns = "www.w3.org/5o/xhtml">
<Head>
<Title> align a single line of text vertically </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Style type = "text/css">
Body {font-size: 12px; font-family: tahoma ;}
Div {
Height: 25px;
Line-height: 25px;
Border: 1px solid # FF0099;
Background-color: # FFCCFF;
}
</Style>
</Head>
<Body>
<D ...... remaining full text>

How to center a DIV in css?

Do you want to center horizontally or vertically?
Horizontal center:
<Style>
. Juzhong {margin: 0px auto; width: 500px ;}
</Style>
<Div class = juzhong> </div>

Vertical center:
<Style>
# Mid {
Position: absolute;
Top: 50%;
Left: 50%;
Margin:-150px 0 0-150px;
Width: 300px;
Height: 300px;
Border: 1px solid red;
}

</Style>
<Div id = mid> </div>

Note: margin:-150px 0 0-150px;
The first 150 is half the height, and the fourth 150 is half the width.