CSS实现水平垂直居中

1、需求分析

     子元素在父元素中水平垂直居中

2、技术分析

   基础的css、html

3、详细分析

如图:

3.1 HTML部分

如图所示，大边框内包含一个小边框两部分，设置一个父元素div和一个子元素div。

<div class="container">
      父元素
     <div class="content">
      子元素
     </div>
</div>　

3.2 CSS部分

<style type="text/css">
     /*格式化页面，消除预留空间*/
	 *{
	  padding:0;
	 }
	 .container{
	 /*给父元素设置除static以外的定位*/
	     position: relative
	     border: 1px solid black;
	     width: 400px;
	     height: 400px;
	 }
	 .content{
	 /*设置绝对定位，相对于第一个父元素(静态定位除外)的定位，不设置位置属性默认为静态定位*/
	     position: absolute;
             border: 1px solid red;
	     width: 200px;
	     height: 200px;
	     /*上下左右设为0，margin:aoto:元素居中*/
	     top: 0;
	     bottom: 0;
	     left: 0;
	     right: 0;
	     margin: auto;	 	
	 }
</style>

注释:

1.position属性:

  语法：object.style.position=static|relative|absolute|fixed

  定义：position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

  值和属性：

(不设置position属性则默认为静态定位，设置静态定位后位置属性(上下左右设置)无效，所以父元素位置属性应为除static以外的定位；子元素设置绝对定位，相较于第一个父元素位置的定位，如果没父元素则相对于浏览器）

2、水平垂直居中

left：0； right：0 ；margin：auto：水平居中

top：0； bottom：0 ；margin：auto：垂直居中

top: 0；bottom: 0；left: 0;；right: 0；margin: auto：水平垂直居中

 

转载于:https://www.cnblogs.com/shidingzhang/p/9360561.html