盒子居中的几种方式

来源：互联网发布：罗兰架子鼓软件编辑：程序博客网时间：2024/06/05 15:40

第一种：普通流盒子居中；

通过设置上边框为透明色，进行高度及计算，后居中；

*{                margin: 0;                padding: 0;            }            .big{                width: 400px;                height: 400px;                background: blue;                border-top: 1px solid transparent;            }            .big>div{                width: 200px;                height: 200px;                background: red;                margin: 25% auto;            }                    </style>    </head>    <body>        <div class="big">            <div>列1</div>        </div>    </body>

第二种：利用相对定位和绝对定位进行居中；

.big{width: 400px;height: 400px;background: blue;position: relative;}.big>div{width: 200px;height: 200px;background: red;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}</style></head><body><div class="big"><div>列1</div></div></body>

第三种方式：利用button做外容器，里边的块元素会自动垂直居中，只需要控制一下水平居中就可以达到效果；

<style>*{margin: 0;padding: 0;}.big{width: 400px;height: 400px;background: blue;}.big>div{width: 200px;height: 200px;background: red;margin: 0 auto;}</style></head><body><button class="big"><div>列1</div></button></body>

第四种利用弹性盒子居中：CSS3中引入的新布局方式，比较好用。缺点：IE9以及IE9一下不兼容。

<style>*{margin: 0;padding: 0;}.big{width: 400px;height: 400px;background: blue;display: flex;}.big>div{width: 200px;height: 200px;background: red;margin: auto;}</style></head><body><div class="big"><div>列1</div></div>

第五种：利用transform居中；这种方法灵活运用CSS中transform属性，较为新奇。

<style>*{margin: 0;padding: 0;}.big{width: 400px;height: 400px;background: blue;}.big>div{width: 200px;height: 200px;background: red;transform: translate(50%,50%);}</style></head><body><div class="big"><div>列1</div></div>

第六种：利用table-cell居中方式

<style>*{margin: 0;padding: 0;}.big{width: 400px;height: 400px;background: blue;display: table-cell;vertical-align: middle;}.big>div{width: 200px;height: 200px;background: red;margin: 0 auto;}</style></head><body><div class="big"><div>列1</div></div>

阅读全文

0 0