网站建设宣传海报,下载网页设计素材,郑州网站建设系统培训,wordpress播入视频播放前端常问居中面试问题
css文本居中
文本水平居中 div classfatherdiv classchilddiv
div子类元素为行内元素#xff0c;则给父类元素定义text-align:center
如果子元素是块元素#xff0c;则给子元素定义margindiv classfatherdiv classchilddiv
div子类元素为行内元素则给父类元素定义text-align:center
如果子元素是块元素则给子元素定义margin0 auto
如果子元素是块级元素可以通过display将子元素定义成行内元素在给子元素定义text-align:center
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgetitleDocument/titlestyle.father {width: 800px;height: 800px;background-color: skyblue;}.child {display: block;text-align: center;background-color: orange;}/style
/head
bodydiv classfatherspan classchild我是一棵小小小小草奥/span/div
/body
/html如果margin0 auto加在父元素上则父元素相对与body水平居中。text-align是作用于自身
文本垂直居中
divhello word /div
例如这个高为100px让文本居中你需要两个条件
div {vertical-align:middledisplay:table-cell;
}
这里display必须是table-cell
是table-cell会控制这个盒子的宽度为里面text的宽度并不是真正可以设置宽高
另一种方法是对单行文本的垂直居中可以将行高line-height设置为盒子的高度
给盒子做居中
盒子水平居中
marginauto
盒子垂直居中不能用margin可以用定位或者flex布局实现或者浮动
用定位实现常见的父子盒子都是块元素的情况
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgetitleDocument/titlestyle.father {width: 800px;height: 800px;background-color: skyblue;position: relative;}.child {width: 200px;height: 200px;top: 50%;left: 50%;transform: translate(-50%,-50%);position: absolute;background-color: orange;}/style
/head
bodydiv classfatherdiv classchild/div/div
/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgetitleDocument/titlestyle.father {width: 800px;height: 800px;background-color: skyblue;position: relative;//父元素开启相对定位}.child {width: 200px;height: 200px;top: 0;left: 0;right: 0;bottom: 0;margin: auto; //居中关键就是外边距为autoposition: absolute; //子元素开启固定定位background-color: orange;}/style
/head
bodydiv classfatherdiv classchild/div/div
/body
/html方式不一样但是呈现的样式是一样的 弹性盒子居中
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgetitleDocument/titlestyle.father {width: 800px;height: 800px;display: flex; //这里必须要开启弹性盒子justify-content: center; //水平居中align-items: center;//垂直居中background-color: skyblue;}.child {width: 200px;height: 200px;background-color: orange;}/style
/head
bodydiv classfatherdiv classchild/div/div
/body
/html
