css和HTML布局小技巧

时间：2022-07-04 20:28:54

一：水平居中

      1. 如下所示，让child在parent中水平居中

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
        .parent{ width:300px; height:200px; border:1px solid #000; text-align: center; }
        .child{  width: 50px;  height:50px;  border:1px solid red;  display: inline-block;}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>

第一种方法：给父元素添加text-align：center属性，把子元素变成行内框，display：inline-block；（子元素可以是行内元素也可以是块级元素）

第二种方法：给子元素添加margin:0 auto;属性（子元素必须有宽度，而且必须是块级元素）；

 

第三种方法：利用绝对定位和相对定位实现

 

       .parent{
            width:300px;
            height:200px;
            border:1px solid #000;
            position: relative;//设置相对定位以配合子元素的绝对定位
        }
        .child{
            width: 50px;
            height:50px;
            border:1px solid red;
            position: absolute;
            left:50%;
            margin-left: -25px;//元素宽度的一半
        }

 

二，垂直居中

第一种方法：和上面一样利用绝对定位

       .parent{
            width:300px;
            height:200px;
            border:1px solid #000;
            position: relative;//设置相对定位以配合子元素的绝对定位
        }
        .child{
            width: 50px;
            height:50px;
            border:1px solid red;
            position: absolute;
            top:50%;
            margin-top: -25px;
        }

第二种方法：

给parent增加
display:table-cell;
vertical-align: middle;

 

标签：

相关文章