本文主要是介绍一个满屏品字布局怎么设计？，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
需要用到技术
1. 元素水平居中对齐
1) 使用margin对齐(推荐)
2) 使用left：50%
3) 使用text-align：行内元素居中对齐，给父元素设置text-align： center
2. 元素对相对窗口定位
1) 使用filxed（推荐）：总是根据浏览器的窗口来进行元素的定位
2) 使用absolute定位
3) 使用html和body的width和height填?这个窗口
3. 元素左右定位
1) 使用float左右浮动
2) 使用绝对定位进行左右定位（推荐）
第一种方式：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>满屏品字布局</title><style type="text/css">*{margin: 0;padding: 0;}html,body{height: 100%;/*此设置非常关键，因为默认的body，HTML高度为0，所以后面设置的div的高度无法用百分比显示*/} .header{height:50%; /*此步结合html,body高度为100%，解决元素相对窗口的定位问题*/width: 50%; background: #ccc; margin:这篇关于一个满屏品字布局怎么设计？的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
