css怎么设置整个网页居中（web前端开发中css水平居中布局解决方案大全）
css怎么设置整个网页居中（web前端开发中css水平居中布局解决方案大全）在css样式单中设置.parent{position：relative}，将父元素设置为相对定位元素，作为子元素的参考元素。评价：该解决方案只修改到子元素的样式，与父元素无关；缺点是只能兼容IE8以上版本的浏览器。设置.parent{text-align：center}将父元素中的子元素设置为居中。评价：该解决方案的兼容性非常好，甚至可以兼容到IE6，缺点在于在页面中元素较多时，代码数量将稍显庞大。在css样式单中设置.child{display：table；margin：0 auto；}，其中table将子元素设置宽度为内容宽度，margin属性中的上下为0，左右为auto，从而实现居中。
欢迎关注！
水平居中布局解决方案：水平居中布局需要实现子元素在父元素中水平居中并且子元素和父元素的宽度均为可变的。
水平居中布局通用html
方案一：使用inline-block和text-align属性实现水平居中布局在css样式单中设置.child{display：inline-block}将子元素的宽度设置为内容宽度。
设置.parent{text-align：center}将父元素中的子元素设置为居中。
评价：该解决方案的兼容性非常好，甚至可以兼容到IE6，缺点在于在页面中元素较多时，代码数量将稍显庞大。
方案二：使用table和margin属性实现水平居中布局在css样式单中设置.child{display：table；margin：0 auto；}，其中table将子元素设置宽度为内容宽度，margin属性中的上下为0，左右为auto，从而实现居中。
评价：该解决方案只修改到子元素的样式，与父元素无关；缺点是只能兼容IE8以上版本的浏览器。
方案三：使用absolute和transform实现水平居中布局在css样式单中设置.parent{position：relative}，将父元素设置为相对定位元素，作为子元素的参考元素。
设置.child{position：absolute；left：50%；transform：translateX（-50%）；}，使用绝对定位元素将子元素放到父元素中间，再使用translateX（-50%）将子元素自身宽度的50%移到正确的位置上。
评价：子元素脱离文档流，不会影响到后续元素的布局；但是transform是css3中新规定的属性，兼容性上有欠缺。
方案四：使用flex和justify-content实现水平居中布局在css样式单中设置.parent{display：flex；justify-content：center；}，将父元素设置为flex元素，justify-content使得弹性元素flex中的子元素自动居中对齐。
评价：该方案只涉及到父元素的属性设置，不牵扯到子元素。缺点是flex的兼容性还比较弱。
收藏转发请先关注，谢谢支持！
