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

Let's talk about the problem of Vue integrating sweetalert2 prompt component

Table of contents 1. Project Integration 1. CDN i...

Experience of redesigning the homepage of TOM.COM

<br />Without any warning, I saw news on cnB...

PHP scheduled backup MySQL and mysqldump syntax parameters detailed

First, let's introduce several common operati...

Detailed explanation of four types of MySQL connections and multi-table queries

Table of contents MySQL inner join, left join, ri...

Solution to the failure of docker windows10 shared directory mounting

cause When executing the docker script, an error ...

Essential Handbook for Web Design 216 Web Safe Colors

The color presentation on a web page will be affec...

How to use JS to implement waterfall layout of web pages

Table of contents Preface: What is waterfall layo...

Solve the problem that Docker cannot ping the host machine under Mac

Solution Abandon the Linux virtual machine that c...

Mysql 5.6.37 winx64 installation dual version mysql notes

If MySQL version 5.0 already exists on the machin...

Detailed explanation of Linux server status and performance related commands

Server Status Analysis View Linux server CPU deta...

Example of how nginx implements dynamic and static separation

Table of contents Deploy nginx on server1 Deploy ...

10 content-related principles to improve website performance

<br />English address: http://developer.yaho...

Vue realizes the progress bar change effect

This article uses Vue to simply implement the cha...

How to add custom system services to CentOS7 systemd

systemd: The service systemctl script of CentOS 7...

Sample code for implementing 3D rotation effect using pure CSS

Mainly use the preserve-3d and perspective proper...