css实现盒子内部 div水平垂直居中

总结一下利用css实现盒子内部 div居中的几种方法


1.水平居中

1)margin: 0 auto

  
<body>
  <div class="box">
    <div class="box1">div>
  div>
body>

css实现盒子内部 div水平垂直居中_第1张图片

2.水平垂直居中

1)定位和需要定位的元素的margin减去宽高的一半
局限性:需要知道需要垂直居中的宽高才能实现

  
<body>
  <div class="box">
    <div class="box1">div>
  div>
body>

css实现盒子内部 div水平垂直居中_第2张图片
2)position定位和margin:auto;
不受宽高限制

  
<body>
  <div class="box">
    <div class="box1">div>
  div>
body>

css实现盒子内部 div水平垂直居中_第3张图片
3)定位和transfrom

  
<body>
  <div class="box">
    <div class="box1">div>
  div>
body>

css实现盒子内部 div水平垂直居中_第4张图片
4)flex居中

  
<body>
  <div class="box">
    <div class="box1">div>
  div>
body>

css实现盒子内部 div水平垂直居中_第5张图片
5)diplay:table-cell

  
<body>
  <div class="box">
    <div class="box1">div>
  div>
body>

css实现盒子内部 div水平垂直居中_第6张图片

你可能感兴趣的:(css,前端,CSS3)