沙坪坝网站开发,企业网站建设规划书,做毕业设计网站的步骤,厦门满山红网站建设元素居中
对于当行文字居中#xff0c;比较简单#xff0c;设置text-align:center和text-height为盒子高度即可
对于父元素中子元素居中#xff0c;要实现的话有以下几个方法
方法1#xff1a;利用定位margin#xff1a;auto
style.father {width: 500px;heig…元素居中
对于当行文字居中比较简单设置text-align:center和text-height为盒子高度即可
对于父元素中子元素居中要实现的话有以下几个方法
方法1利用定位marginauto
style.father {width: 500px;height: 300px;border: 1px solid #0a3b98;position: relative;}
.son {width: 100px;height: 40px;background: #f0a238;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin:auto;}
/style
div classfatherdiv classson/div
/div
父元素中relative相对定位子元素absolute绝对定位并设置topleftrightbottom为0并设置margin:auto
方法2利用定位margin负值
style.father {position: relative;width: 200px;height: 200px;background: skyblue;}.son {position: absolute;top: 50%;left: 50%;margin-left:-50px;margin-top:-50px;width: 100px;height: 100px;background: red;}
/style
div classfatherdiv classson/div
/div
父元素中relative相对定位子元素absolute绝对定位并设置topleft为50%并设置margin-left和margin-top为盒子大小的一半-50px这种情况需要知道盒子大小
方法3利用定位transform
style.father {position: relative;width: 200px;height: 200px;background: skyblue;}.son {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100px;height: 100px;background: red;}
/style
div classfatherdiv classson/div
/div
父元素中relative相对定位子元素absolute绝对定位并设置topleft为50%并使用transform移动-50%transform: translate(-50%,-50%); 此方法不需要知道盒子大小
方法4利用flex
style.father {display: flex;justify-content: center;align-items: center;width: 200px;height: 200px;background: skyblue;}.son {width: 100px;height: 100px;background: red;}
/style
div classfatherdiv classson/div
/div
使用flex布局设置justify-content: center; 水平居中 align-items: center;设置垂直居中
