css width variable horizontal high vertical center div element

Renderings:

method one:

This div element should be inline-block:

With a "ghost" pseudo-element (not visible pseudo-element) and inline-block / vertical-align center can handle, very clever. However, this method requires the element to be centered is inline-block, is not a truly universal solution. Compatible with IE8.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    
        .block {
          text-align: center;
          background: #abcdef;
        }

        .block:before {
          content: '';
          display: inline-block;
          height: 100%;
          vertical-align: middle;
          margin-right: -0.25em; /* Adjusts for spacing */
        }

        .centered {
          display: inline-block;
          vertical-align: middle;
          width: 50%;
          border: 1px solid red;
        }

    </style>
</head>
<body>

    < Div class = "Block" style = "height: 300px by;" > 
        < div class = "centered" > 
            < h1 of > Case Title </ h1 of > 
            < P > Case content cases content cases content cases content cases content </ P > 
        </ div > 
    </ div > 

</ body > 
</ HTML >

View Code

Method Two:

CSS3 (simple, disadvantage is that compatibility is not good)

Run the display: Flex; 

The justify-Content: Center; // sub-element is centered horizontally

align-items: center; // child element vertically centered

Method three:

This approach and our Fixed aspect of the same, but we do not use the margin translate ()

Paste the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不固定高度div写法</title>
     <style>
        .center {
          position: fixed;
          top: 50%;
          left: 50%;
          background-color: #abcdef;
          width:50%;
          height: 50%;
          transform: translateX(-50%) translateY(-50%);
        }
     </style>
</head>
<body>
    <div class="center"></div>
</body>

</html>

View Code

Method four:

Use margin: auto vertical centering

Margin value is auto, it allows us to allocate the remaining space! We know that the block-level elements to margin: 0 auto; be centered around! That there is no way to get margin to margin: auto, the left and right down the middle of it all? All up and down the middle, we can achieve our vertically centered it!

The answer is yes, as long as we have enough space to make up and down, you can let the auto margin to allocate space from top to bottom.

We can use positioned, so that margin down about enough room! Then you can use margin: auto to achieve a vertically centered!

Paste the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不固定高度div写法</title>
     <style>
        .father{
            position:fixed;
            width:100%;
            height:100%;
            top:0;
            left:0;
            background-color:rgba(0,0,0,.7);
        }
        .son{
             position: absolute;
             top:0;
             left:0;
             bottom:0;
             right:0;
             width:50%;
             height:50%;
             margin:auto;
             background-color:red;
         }
     </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

View Code

css width variable horizontal high vertical center div element

Use margin: auto vertical centering

Guess you like