【CSS】div 盒子居中的常用方法

<body>
    <div class="main">
        <div class="box">div>
    div>
body>
  1. 绝对定位加 margin: auto;

  1. 绝对定位加负 margin:

  1. margin 推动:

  1. flex 居中:

  1. transform:

  1. 子盒子宽高不确定(需要保证left和right的百分数一样,top和bottom的百分数一样):
<style>
    * {
        padding: 0;
        margin: 0;
    }
    .main {
        width: 400px;
        height: 400px;
        border: 2px solid #000;
        margin: 30px auto;
        position: relative;
    }
    .box {
        background-color: #f00;
        position: absolute;
        left: 25%;
        top: 25%;
        right: 25%;
        bottom: 25%;
    }
style>

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

【CSS】div 盒子居中的常用方法_第1张图片

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