可以使用javsscript来实现
假设div的名字是layout
<div id="layout">...</div>
function autozize(){
var para = document.getElementById("layout")
var width = document.body.clientWidth
if width <= 1000
para.style.width = 980px
else
para.style.width = 98%
}
para.style.fontSize = "2em"
}
容器的居中显示在网页设计中是很常见的,居中显示可以获得视觉的焦点,是内容更加突出,下面就简单的说明一下如何在HTML中通过样式的控制来实现
01最常见的一种,代码示例如下图,首先,取big一半像素大小赋给small层,通过margin: 0 autotext-align: center来实现
02第二种方法,代码示例如下图,将big层的display设置为table-cell,然后small层的margin-left取(500-250)/2,也就是125即可
03第三种方法,代码示例如下图,将big层的position设置为absolute,然后small层的margin-left取(500-250)/2,也就是125即可
04第四种方法,通过display:flex实现,代码示例如下图,big层display:flexflex-direction:column而small层align-self:center
05第五种方法,在small层的宽度没有的时候,可以通过width:fit-content这个设置来完成,代码示例如下
06第六种方法,通过display:inline-block来实现,将这个设置赋给big层即可,代码示例如下图
07第七种方法,设置big层position:relative,相对情况下,使small层左浮动,代码示例如下
08第八种方法,transform属性,代码示例如下
09第九种方法,借助第三方样式,比如增加一个add节点,水平浮动向左,使small层随之浮动,代码示例如下
特别提示每种方法都适应不同的运行环境,实际操作时需要考虑不同浏览器的解析时的兼容性
链接:https://zhuanlan.zhihu.com/p/39437057
第一种:利用负的margin来进行居中,需要知道固定宽高,限制比较大。
body>div:nth-of-type(1){ width:400pxheight:400pxbackground:#ff0position:relativemargin-bottom:10px}
body>div:nth-of-type(1)div{ width:100pxheight:100pxbackground:#0f0position:absolutetop:50%left:50%margin-left:-50pxmargin-top:-50px}
第二种:利用绝对定位居中,非常常用的一种方法。body>div:nth-of-type(2){ width:400pxheight:400pxbackground:#ff0position:relativemargin-bottom:10px}
body>div:nth-of-type(2) div{ width:100pxheight:100pxbackground:#0f0position:absolutetop:0left:0right:0bottom:0margin:auto}
第三种:使用flex布局(.min宽高可不固定)
body>div:nth-of-type(3){ width:400pxheight:400pxbackground:#ff0margin-bottom:10pxdisplay:flex}
body>div:nth-of-type(3) div{ width:100pxheight:100pxbackground:#0f0margin:auto }
第四种:flex居中(演示)。CSS3中引入的新布局方式,比较好用。缺点:IE9以及IE9一下不兼容。
body>div:nth-of-type(4){ width:400pxheight:400pxbackground:#ff0margin-bottom:10pxdisplay:flexjustify-content:centeralign-items:center}
body>div:nth-of-type(4) div{ width:100pxheight:100pxbackground:#0f0}
第五种:利用table-cell来控制垂直居中。
body>div:nth-of-type(5){ width:400pxheight:400pxbackground:#ff0margin-bottom:10pxvertical-align:middledisplay:table-celltext-align:center}
body>div:nth-of-type(5) div{ width:100pxheight:100pxbackground:#0f0display:inline-block }
第六种:利用空盒子做外容器,里边的块元素会自动垂直居中,只需要控制一下水平居中就可以达到效果。
body>div:nth-of-type(6){ width:400pxheight:400pxbackground:#ff0margin-bottom:10pxtext-align:center vertical-align:middle}
body>div:nth-of-type(6) div{ width:100pxheight:100pxbackground:#0f0display:inline-blockvertical-align:middle}
body>div:nth-of-type(6) span{ width:0height:100%display:inline-blockvertical-align:middle}
第七种:这种方法灵活运用CSS中transform属性,较为新奇。缺点是IE9下不兼容。
body>div:nth-of-type(7){ width:400pxheight:400pxbackground:#ff0position:relativemargin-bottom:10px}
body>div:nth-of-type(7) div{ width:100pxheight:100pxbackground:#0f0position:absolutetop:50%left:50%transform:translate(-50%,-50%)}