Implementation of vertical centering with unknown height in CSS

Implementation of vertical centering with unknown height in CSS

This article mainly introduces the implementation of vertical centering of unknown height in CSS, and shares it with you. The details are as follows: 

<!doctype html>
<html lang="en">  
  <head>  
    <meta charset="utf-8" />  
    <meta content="IE=8" http-equiv="X-UA-Compatible"/>  
    <title>CSS vertical center</title>  
    <style type="text/css">  
      .container{  
        width:500px;/*Decoration*/
        height:500px;  
        background:#B9D6FF;  
        border: 1px solid #CCC;  
      }  
       
    </style>  
  </head>  
  <body>  
    <h1>Vertical center (table)</h1>  
    <div class='container'>
        <table width="100%" height="100%">
            <tr>
               <td align="center" valign="middle">
                  <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
               </td>
           </tr>
       </table> 
   </div>
     
  </body>  
</html>

Okay, let's look at its CSS implementation. Anything that tables can do, CSS can do, but CSS differs greatly from browser to browser, so it is very difficult to be compatible with them. This involves many details, various flows, display effects and CSS hacks. IE developed a lot of private attributes in the early years, which we need to explore further. Let's first look at the simplest implementation, the background image method

Background Image Method 

<!doctype html>
<html>
<head>
<title>CSS vertical center</title>
<style type="text/css">
.container {
  width:500px;
  height:500px;
  line-height:500px;
  background:#B9D6FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg) no-repeat center center;
  border:1px solid #f00;
  text-align: center;
}
 
</style>
 
</head>
<body>
<h1>Vertical center</h1>
<div class="container">
    
</div>
</body>
</html>

CSS Expression Method

<html lang="en">  
  <head>  
    <meta charset="utf-8" />  
    <meta content="IE=8" http-equiv="X-UA-Compatible"/>  
    <title>Situ Zhengmei CSS vertical centering</title>  
    <style type="text/css">  
      .container{  
        /*IE8 vertically aligns with standard browsers*/
        display: table-cell;
        vertical-align:middle; 
        width:500px;/*Decoration*/
        height:500px;  
        background:#B9D6FF;  
        border: 1px solid #CCC;  
      }  
      .container img{  
        display:block;/*Let it have a box model*/
        margin:0 auto;  
        text-align:center;
        margin-top:expression((500 - this.height )/2);/*Allow IE567 to align vertically*/
      }  
    </style>  
  </head>  
  <body>  
    <h1>Vertical center (CSS expression)</h1>  
    <div class="container">  
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />  
    </div>  
  </body>  
</html>

Absolute positioning method

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta content="IE=8" http-equiv="X-UA-Compatible"/>
    <title>Situ Zhengmei CSS vertical centering</title>
    <style type="text/css">
      div {
       /*IE8 vertically aligns with standard browsers*/
        display:table-cell;
        vertical-align:middle;
        overflow:hidden;
        position:relative;
        text-align:center;
        width:500px;/*Decoration*/
        height:500px;
        border:1px solid #ccc;
        background:#B9D6FF;
      }
      div p {
        +position:absolute;
        top:50%
      }
      img {
        +position:relative;
        top:-50%;
        left:-50%;
      }
  
    </style>
  </head>
  <body>
    <h1>Vertical center (absolute positioning)</h1>
    <div class="container">
      <p>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
      </p>
    </div>
  </body>
</html>

display:inline-block method

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta content="IE=8" http-equiv="X-UA-Compatible"/>
    <title>Situ Zhengmei CSS vertical centering</title>
    <style type="text/css">
      div {
        display:table-cell;
        vertical-align:middle;
        text-align:center;
        width:500px;
        height:500px;
        background:#B9D6FF;
        border: 1px solid #CCC;
      }
 
    </style>
    <!--[if IE]>
<style type="text/css">
i {
    display:inline-block;
    height:100%;
    vertical-align:middle
    }
img {
    vertical-align:middle
    }
</style>
<![endif]-->
    
  </head>
  <body>
    <h1>Vertical centering (inline-block method)</h1>
    <div class="container">
      <i></i>
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
    </div>
  </body>
</html>

Writing-mode

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta content="IE=8" http-equiv="X-UA-Compatible"/>
    <title>CSS vertical center</title>
    <style type="text/css">
      div{
        width:500px;
        height:500px;
        line-height:500px;
        text-align:center;
        background:#B9D6FF;
        border:1px solid #f00;
      }
      div span{
        height:100%\9;
        writing-mode:tb-rl\9;
      }
      div img{
        vertical-align:middle
      }
    </style>
  </head>
  <body>
    <h1>Vertical centering (writing-mode method)</h1>
    <div class="container">
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
      </span>
    </div>
  </body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<:  MySQL 5.7 cluster configuration steps

>>:  How to configure eureka in docker

Recommend

How to create a view on multiple tables in MySQL

In MySQL, create a view on two or more base table...

HTML+CSS div solution when relative width and absolute width conflict

Div solution when relative width and absolute wid...

Summary of 7 reasons why Docker is not suitable for deploying databases

Docker has been very popular in the past two year...

Sharing tips on using scroll bars in HTML

Today, when we were learning about the Niu Nan new...

Elementui exports data to xlsx and excel tables

Recently, I learned about the Vue project and cam...

Using CSS to implement image frame animation and curve motion

The basic principle of all animations is to displ...

Detailed explanation of the differences between SQL joint query inner join, outer join and cross join

When developing applications that use a database,...

Vue Virtual DOM Quick Start

Table of contents Virtual DOM What is virtual dom...

Pure CSS implementation of radio and checkbox effect example

radio-and-checkbox Pure CSS to achieve radio and ...

CSS easily implements fixed-ratio block-level containers

When designing H5 layout, you will usually encoun...

Vue scaffolding learning project creation method

1. What is scaffolding? 1. Vue CLI Vue CLI is a c...

Detailed explanation of Docker container network port configuration process

Exposing network ports In fact, there are two par...

Pure CSS meteor shower background sample code

GitHub address, you can star it if you like it Pl...

Detailed explanation of docker nginx container startup and mounting to local

First, the structure inside the nginx container: ...

Util module in node.js tutorial example detailed explanation

Table of contents Starting from type judgment Str...