css常见的水平垂直居中

前端攻城狮_lucky

于 2017-05-31 11:05:32 发布

阅读量350

点赞数

分类专栏： 0基础学css html 文章标签： css html 水平垂直居中

本文链接：https://blog.youkuaiyun.com/sinat_31597631/article/details/72818656

版权

0基础学css 同时被 2 个专栏收录

3 篇文章

订阅专栏

html

3 篇文章

订阅专栏

 
  <!DOCTYPE html 
  > 
 
  < 
  html 
   lang= 
  "en" 
  > 
 
  < 
  head 
  > 
 
  < 
  meta 
   charset= 
  "UTF-8" 
  > 
 
  < 
  meta 
   name= 
  "viewport" 
   content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
  < 
  meta 
   http-equiv= 
  "X-UA-Compatible" 
   content= 
  "ie=edge" 
  > 
 
  < 
  title 
  >水平垂直居中 
  </ 
  title 
  > 
 
  </ 
  head 
  > 
 
  < 
  style 
  > 
 
  .outBox { 
 
  position: 
  relative; 
 
  width: 
  300px; 
 
  height: 
  300px; 
 
  background: 
  #ff8300; 
 
  border: 
  1px 
  solid 
  #ff8300; 
 
  border-radius: 
   10px; 
 
  margin: 
  auto 
 
   } 
 
  .innerBox { 
 
  position: 
  absolute; 
 
  width: 
  100px; 
 
  height: 
  100px; 
 
  background: 
  rgba( 
  0, 
  0, 
  0, 
  .7); 
 
  border: 
  1px 
  solid 
  #ff8300; 
 
  border-radius: 
   6px; 
 
  top: 
  50%; 
 
  left: 
  50%; 
 
  margin-left: 
   -50px; 
 
  margin-top: 
  -50px; 
 
   } 
 
  < 
  / 
  style 
  > 
 
  < 
  body 
  > 
 
  < 
  div 
   class= 
  "outBox" 
  > 
 
  < 
  div 
   class= 
  "innerBox" 
  > 
 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  </ 
  body 
  > 
 
  </ 
  html 
  > 
 
  外层相对定位，内层绝对定位。看要居中的物体大小top,left统统50%，然后margin-left,margin-top 负的物体大小的一半， 
 
  比如一个内层100px*100px的，那就是margin-left:-50px;margin-top:-50px