Home > Web Front-end > HTML Tutorial > How to center the content vertically and horizontally when writing a modal box?

How to center the content vertically and horizontally when writing a modal box?

PHP中文网
Release: 2017-06-20 09:45:37
Original
2700 people have browsed it

Hello everyone, today we will talk about how to center the content vertically and horizontally when writing a modal box. Let’s keep our focus simple first,

This problem is actually equivalent to how to center a div vertically and horizontally. So how do we achieve this problem? There are 5 solutions.

First of all, in the first case, when we know the width and height of div1:

  <div id="div1"></div  #div1{
Copy after login
<span style="font-size: 18px">      width: 200px;</span><br/><span style="font-size: 18px">      height: 100px;</span><br/><span style="font-size: 18px">      background: #54fa45;</span><br/><span style="font-size: 18px">      position: absolute;</span><br/><span style="font-size: 18px">      left:50%;</span><br/><span style="font-size: 18px">      top:50%;</span><br/><span style="font-size: 18px">      margin-left:-100px;  //设置div1的左边距为宽度的一半</span><br/><span style="font-size: 18px">      margin-top:-50px; //设置div1的上边距为高度的一半</span><br/><span style="font-size: 18px">  }<br/>  第二种情况下:不知道div1的宽高,就好比设置图片的垂直水平居中:<br/></span>
Copy after login
    
Copy after login
<span style="font-size: 18px">    img{</span><br/><span style="font-size: 18px">        position: absolute;</span><br/><span style="font-size: 18px">        left: 0;</span><br/><span style="font-size: 18px">        top: 0;</span><br/><span style="font-size: 18px">        right: 0;</span><br/><span style="font-size: 18px">        bottom: 0;</span><br/><span style="font-size: 18px">        margin: auto;</span><br/><span style="font-size: 18px">     }</span>
Copy after login
<span style="font-size: 18px">    这种情况其实很简单,给图片一个绝对定位,然后上下左右都为0,最后margin:auto;<br/>    第三种情况:利用display:table<br/></span>
Copy after login
      
Copy after login
Copy after login
<span style="font-size: 18px">        html,body{</span><br/><span style="font-size: 18px">            height: 100%;</span><br/><span style="font-size: 18px">            overflow:hidden;</span><br/><span style="font-size: 18px">        }</span><br/><span style="font-size: 18px">        #box{</span><br/><span style="font-size: 18px">            width:100%;</span><br/><span style="font-size: 18px">            height:100%;</span><br/><span style="font-size: 18px">            background: #dbffd8;</span><br/><span style="font-size: 18px">            display:table;</span><br/><span style="font-size: 18px">        }</span><br/><span style="font-size: 18px">        #div1{</span><br/><span style="font-size: 18px">            height:100%;</span><br/><span style="font-size: 18px">            width:100%;</span><br/><span style="font-size: 18px">            display:table-cell;</span><br/><span style="font-size: 18px">            text-align:center;</span><br/><span style="font-size: 18px">            vertical-align:middle;</span><br/><span style="font-size: 18px">        }<br/>   第四种情况:利用display:</span><span style="font-size: 18px"><em style="line-height: 1.5">table-cell;<br/></em></span>
Copy after login
      
Copy after login
Copy after login
<span style="font-size: 18px">    html,body{</span><br/><span style="font-size: 18px">        height: 100%;</span><br/><span style="font-size: 18px">        overflow:hidden;</span><br/><span style="font-size: 18px">    }</span><br/><span style="font-size: 18px">    #box{</span><br/><span style="font-size: 18px">        width:100%;</span><br/><span style="font-size: 18px">        height:100%;</span><br/><span style="font-size: 18px">        background: #dbffd8;</span><br/><span style="font-size: 18px">        display:table;</span><br/><span style="font-size: 18px">    }</span><br/><span style="font-size: 18px">    #div1{</span><br/><span style="font-size: 18px">        height:100%;</span><br/><span style="font-size: 18px">        width:100%;</span><br/><span style="font-size: 18px">       <span style="color: #ccffff"> <span style="color: #000000">display:table-cell;</span></span></span><br/><span style="font-size: 18px; color: #000000">        text-align:center;</span><br/><span style="font-size: 18px; color: #000000">        vertical-align:middle;</span><br/><span style="font-size: 18px">      }<br/>  最后一种就是利用盒子的怪异盒模型了<br/></span>
Copy after login
<span style="font-size: 18px">    <div id="box"><br><span style="font-size: 18px">        <img src="img/map-pin.png" alt=""></span><br><span style="font-size: 18px">    </div><br></span>
Copy after login
<span style="font-size: 18px">      html,body{</span><br><span style="font-size: 18px">          height: 100%;</span><br><span style="font-size: 18px">          overflow:hidden;</span><br><span style="font-size: 18px">       }</span><br><span style="font-size: 18px">     #box{</span><br><span style="font-size: 18px">          width:100%;</span><br><span style="font-size: 18px">          height:100%;</span><br><span style="font-size: 18px">          display:-webkit-box;</span><br><span style="font-size: 18px">          -webkit-box-align:center;</span><br><span style="font-size: 18px">          -webkit-box-pack:center;</span><br><span style="font-size: 18px">      }<br>这就是我对元素水平居中的理解,你们学会了吗?</span>
Copy after login
 <br>
Copy after login

The above is the detailed content of How to center the content vertically and horizontally when writing a modal box?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template