How to set the element to be displayed horizontally, vertically, and centered in css

First of all, let’s introduce the following two attributes:

1. Text-align is to set the horizontal alignment of text in the element.

It works on text, controlling text, and has no effect on block elements. It can only make the content in the block element (such as the text in the p tag: center the text in the p tag) relatively Block elements are centered.

2. Vertical-align is to set the vertical alignment of elements.

It works on elements; it can only work on inline or inline block elements. This attribute is aligned relative to the baseline. Let’s introduce the baseline.

How to set an element to be displayed horizontally and vertically centered in the parent element?

1. Write the text-align attribute to its parent element;

2. Convert the type of the element to be centered to inline-block;

3 , add the vertical-align attribute to the element to be centered;

4. Add a "ruler", which is a sibling element (span, etc.), and the element to be centered is vertically centered with each other.

(Video tutorial recommended: css video tutorial)

Note:

The ruler must add the following attributes:

display: inline-block;

width: 0; (the purpose is to hide the ruler)

height: 100% (the same height as the parent element, the midline position is the center position);

vertical-align: middle;

For example: let div1-1 be horizontally and vertically aligned in div1, and add a background color for distinction.

<div class="div1">div1
    <div class="div1-1">div2</div><span></span>
</div>

CSS part:

*{
    margin: 0;
    padding: 0;
}
.div1{
    width: 200px;
    height: 150px;
    background: blue;
    margin: 20px 20px;
    text-align: center;
}
.div1-1{
    width: 100px;
    height: 100px;
    background: red;
    display: inline-block;
    vertical-align: middle;
}
.div1 span{
    display: inline-block;
    width: 0px;
    height: 100%;
    background: #0681D0;
    vertical-align: middle; 
}

Rendering:

CSS basic tutorial

The above is the detailed content of How to set the element to be displayed horizontally, vertically, and centered in css. For more information, please follow other related articles on the PHP Chinese website!