顺义网站建设报价,什么是响应式网站,旅游公司网站设计,微信软文模板在前端切图的时候#xff0c;可能经常会遇到一个div盒子怎么在固定区域垂直居中的需求#xff0c;下面我们来看一下css实现盒子居中的方法。css设置盒子居中的方法#xff1a;第一种#xff1a;用css的position属性.div1 {width: 100px;height: 100px;border: 1px solid #0…在前端切图的时候可能经常会遇到一个div盒子怎么在固定区域垂直居中的需求下面我们来看一下css实现盒子居中的方法。css设置盒子居中的方法第一种用css的position属性.div1 {width: 100px;height: 100px;border: 1px solid #000000;position: relative;}.div2 {width: 40px;height: 40px;background-color: red;position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;}第二种利用css3的新增属性table-cell, vertical-align:middle;.div1 {width: 100px;height: 100px;border: 1px solid #000000;display: table-cell;vertical-align: middle;}.div2 {width: 40px;height: 40px;background-color: red;margin: auto;}第三种利用flexbox布局.div1 {width: 100px;height: 100px;border: 1px solid #000000;display: flex;/*!*flex-direction: column;*!可写可不写*/justify-content: center;align-items: center;}.div2 {height: 40px;width: 40px;background-color: red;}第四种利用transform的属性(缺点需要支持Html5).div1 {width: 100px;height: 100px;border: 1px solid #000000;position: relative;}.div2 {height: 40px;width: 40px;background-color: red;position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}效果图
