首页 > 代码库 > 垂直居中

垂直居中

2024-10-16 02:21:39   217人阅读

 1、垂直居中（为了看到效果，所以设置了高度）

<!DOCTYPE >
<html>
<head>
    <title></title>
    <meta name="name" content="content">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <style type="text/css">
        .container{
            position: relative;
            width: 50%;
            height: 400px;
            border: 1px black solid;
        }
        .container div{
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            height: 100px;
            display: inline-block;
            border: 1px red solid;
        }
    </style>
</head>
<body>
  <div class="container">
    <div>
        <p>我是div里面的p元素</p>
    </div>
</div>
</body>
</html>

技术分享

2、自适应高度垂直居中，但是不支持ie6、7

<!DOCTYPE >
<html>
<head>
    <title></title>
    <meta name="name" content="content">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <style type="text/css">
        ul,li{
            list-style: none;
            width: 400px;
        }
        .clearfix {
            zoom: 1;
        }

        .clearfix:after {
            content: "";
            clear: both;
            display: block;
        }
        li{
            position: relative;
            display: table;
            *display: table;
            table-layout:fixed;
            border:1px black solid;
        }
        li p{
            display: table-cell;  
            vertical-align: middle;  
            padding: 6px 15px;
            width: 16.667%;
            text-align: center;
            border:1px red solid; 
            box-sizing:border-box;
        }
    </style>
</head>
<body>
  <ul>
      <li class="clearfix">
        <p>第</p>
        <p>第二</p>
        <p>第三栏</p>
        <p>第四栏哈</p>
        <p>第四栏哈哈</p>
        <p>第四栏哈哈哈</p>
    </li>
</ul>
</body>
</html>

 

技术分享

3、

 

垂直居中


联系
我们