css实现容器居中丨技术开发分享录

css实现容器居中

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"![](https://box.kancloud.cn/e6e9aacf52895742a0ae6e1ec52cb582_197x196.png)\n\n## 一、 使用position和margin\n\n```markup\n<style>\n    .wrapper {\n        position: relative;\n        width: 500px;\n        height: 500px;\n        border: 1px solid red; \n     }\n    .content{\n        position: absolute;\n        width: 200px;\n        height: 200px;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        margin: auto;\n        border: 1px solid green;    \n    } \n</style>\n<div class=\"wrapper\">\n    <div class=\"content\"></div>\n</div>\n```\n\n## 二、使用position和translate\n\n```markup\n<style>\n    .wrapper {\n        position: relative;\n        width: 500px;\n        height: 500px;\n        border: 1px solid red; \n     }\n    .content{\n        position: absolute;\n        width: 200px;\n        height: 200px;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n        border: 1px solid green;    \n    } \n</style>\n<div class=\"wrapper\">\n    <div class=\"content\"></div>\n</div>\n```\n\n## 三、使用flex和justify-content、align-self\n\n```markup\n<style>\n    .wrapper {\n        display: flex;\n        width: 500px;\n        height: 500px;\n        border: 1px solid red; \n        justify-content: center;\n     }\n    .content{\n        width: 200px;\n        height: 200px;\n        border: 1px solid green;  \n        align-self: center;\n    } \n</style>\n<div class=\"wrapper\">\n    <div class=\"content\"></div>\n</div>\n```\n\n## 四、使用flex和justify-content、align-items\n\n```markup\n<style>\n    .wrapper {\n        display: flex;\n        width: 500px;\n        height: 500px;\n        border: 1px solid red; \n        justify-content: center;\n        align-items: center;\n     }\n    .content{\n        width: 200px;\n        height: 200px;\n        border: 1px solid green;  \n    } \n</style>\n<div class=\"wrapper\">\n    <div class=\"content\"></div>\n</div>\n```\n\n## 五、使用flex和margin\n\n```markup\n<style>\n    .wrapper {\n        display: flex;\n        width: 500px;\n        height: 500px;\n        border: 1px solid red; \n     }\n    .content{\n        width: 200px;\n        height: 200px;\n        border: 1px solid green;  \n        margin: auto;\n    } \n</style>\n<div class=\"wrapper\">\n    <div class=\"content\"></div>\n</div>\n```\n\n## 六、使用table-cell\n\n```markup\n<style>\n    .wrapper {\n        display: table-cell;\n        vertical-align: middle;\n        text-align: center;\n        width: 500px;\n        height: 500px;\n        border: 1px solid red; \n     }\n    .content{\n        display: inline-block;\n        width: 200px;\n        height: 200px;\n        border: 1px solid green;\n    } \n</style>\n<div class=\"wrapper\">\n    <div class=\"content\"></div>\n</div>\n```"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看