css和HTML布局小技巧
2021-06-06 13:03
标签：title char lang 绝对定位 absolute 技巧 utf-8 child 属性 一：水平居中 1. 如下所示，让child在parent中水平居中 第一种方法：给父元素添加text-align：center属性，把子元素变成行内框，display：inline-block；（子元素可以是行内元素也可以是块级元素） 第二种方法：给子元素添加margin:0 auto;属性（子元素必须有宽度，而且必须是块级元素）； 第三种方法：利用绝对定位和相对定位实现 二，垂直居中 第一种方法：和上面一样利用绝对定位 第二种方法： css和HTML布局小技巧 标签：title char lang 绝对定位 absolute 技巧 utf-8 child 属性 原文地址：http://www.cnblogs.com/longailong/p/7338371.htmlDOCTYPE 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>
.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;
上一篇：Hibernate分页