元素完全居中 发表于 2017-05-30 | 分类于 css 元素完全居中的方法 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ display: inline-block; width: 400px; height: 400px; position: relative; background: red; } .box1{ position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; background: #ccc; } .box2{ position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #ccc; } .boxc{ width: 400px; height: 400px; display: flex; align-items: center; justify-content: center; background: #ccc; } .box3{ width: 200px; height: 200px; border: 1px solid red; } .box4{ height: 200px; width: 100px; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #ccc; overflow: auto; } .box4 .cc{ width: 100px; height:50px; background: blue; position: fixed; z-index: 999; } </style></head><body> <div class="box"> <div class="box1"> </div> </div> <div class="box"> <div class="box2"> </div> </div> <div class="boxc"> <div class="box3"> </div> </div> <div class="box"> <div class="box4"> <div class="cc"></div> </div> </div></body></html>