CSS for horizontal and vertical centering

css picture horizontal center

1. Use margin: 0 auto to realize image horizontal center

<div style="margin:0 auto; text-align: center;"></div>


2. Use text align: Center

<div style="margin:0 auto; text-align: center;">
        <p>Using margin: 0 auto to realize image horizontal center</p>
        <div class="innerDiv" style="display: inline-block;">
            <p>Using text align: Center</p>
        </div>
</div>


css picture center vertically

Given altitude

1. Use height = = row height to realize picture vertical center

<div style="margin:0 auto;line-height:150px;text-align: center;">
        <div class="innerDiv" style="display: inline-block;vertical-align: middle;">
            <span style="top:-30px;position:relative">High utilization==Row height to center image vertically</span>
        </div>
   </div>

2. Use absolute positioning to realize vertical image center

<div style="margin:0 auto;position:relative">
        <div class="innerDiv" style="position:absolute;left:50%;top:50%;margin-left:-125px;margin-top:-37.5px">
            Using absolute positioning to realize picture vertical center
        </div>
    </div>

In case of height uncertainty:

1. Use table to realize image vertical center (IE compatibility)!!! )

<div style="margin:0 auto;display: table; text-align: center;">
        <span style="display: table-cell; vertical-align: middle;">
            <div class="innerDiv" style="display: inline-block;">
                    //Using table to realize picture vertical center
            </div>
        </span>
    </div>

2. The mobile terminal can use flex layout to realize the vertical center of css picture

Full code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Centered</title>
    <style>
        div {
            width: 500px;
            height: 150px;
            background-color: #ccc;
            text-align: center;
        }

        .innerDiv {
            width: 50%;
            height: 50%;
            background-color: #FFF;
        }
    </style>
</head>

<body>

    <div style="margin:0 auto;">
        <p>utilize margin: 0 auto To center pictures horizontally</p>
        <div class="innerDiv" style="display: inline-block;">
            <p>Use the horizontal center attribute of text text-align: center</p>
        </div>
    </div>

    <br><br>
    <div style="margin:0 auto;line-height:150px">
        <div class="innerDiv" style="display: inline-block;vertical-align: middle;">
            <span style="top:-30px;position:relative">High utilization==Row height to center image vertically</span>
        </div>
    </div>
    <br><br>
    <div style="margin:0 auto;display: table;">
        <span style="display: table-cell; vertical-align: middle;">
            <div class="innerDiv" style="display: inline-block;">
                    //Using table to realize picture vertical center
            </div>
        </span>
    </div>

    <br><br>
    <div style="margin:0 auto;position:relative">
        <div class="innerDiv" style="position:absolute;left:50%;top:50%;margin-left:-125px;margin-top:-37.5px">
            //Using absolute positioning to realize picture vertical center
        </div>
    </div>

</body>

</html>

Tags: IE Mobile Attribute

Posted on Mon, 04 May 2020 15:42:35 -0700 by rulkster2