{"id":2862,"date":"2020-04-18T20:55:11","date_gmt":"2020-04-18T12:55:11","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=2862"},"modified":"2026-08-18T12:35:29","modified_gmt":"2026-08-18T04:35:29","slug":"css%e5%b8%83%e5%b1%80%e7%b3%bb%e5%88%97-%e5%b1%85%e4%b8%ad%e7%9b%b8%e5%85%b3%e7%9a%84%e5%b8%83%e5%b1%80","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=2862","title":{"rendered":"css\u5e03\u5c40\u7cfb\u5217-\u5c45\u4e2d\u76f8\u5173\u7684\u5e03\u5c40"},"content":{"rendered":"
\n

\u5c45\u4e2d\u662f CSS \u5e03\u5c40\u91cc\u6700\u5e38\u88ab\u95ee\u5230\u7684\u4e00\u5757\uff1a\u6c34\u5e73\u3001\u5782\u76f4\u3001\u6c34\u5e73\u5782\u76f4\u4e09\u5957\uff0c\u65b9\u6848\u4ece text-align<\/code>\u3001margin: 0 auto<\/code> \u5230\u5b9a\u4f4d transform<\/code> \u518d\u5230 Flex<\/strong>\u3002\u4e0b\u9762\u6309\u6548\u679c\u628a\u80fd\u7528\u7684\u5199\u6cd5\u6536\u9f50\uff0c\u5e76\u6807\u51fa\u7ee7\u627f\u6027\u548c\u8131\u79bb\u6587\u6863\u6d41\u65f6\u7684\u5751\u3002<\/p>\n

\u9009\u65b9\u6848\u65f6\u5148\u95ee\u4e09\u4ef6\u4e8b\uff1a\u5b50\u5143\u7d20\u662f\u5426\u5757\u7ea7\u3001\u662f\u5426\u5df2\u8131\u79bb\u6587\u6863\u6d41\u3001\u8981\u4e0d\u8981\u517c\u5bb9\u8001\u6d4f\u89c8\u5668\u3002\u80fd\u7528 Flex \u5c31\u6700\u7701\u4e8b\uff1b\u5fc5\u987b\u517c\u5bb9\u65f6\u518d\u9000\u56de\u5b9a\u4f4d\u6216 table-cell<\/code>\u3002<\/p>\n\n\n\n\n\n\n\n
\u76ee\u6807<\/th>\n\u5e38\u7528\u65b9\u6848<\/th>\n\u6ce8\u610f<\/th>\n<\/tr>\n<\/thead>\n
\u6c34\u5e73\u5c45\u4e2d<\/td>\ninline-block + text-align\uff1b\u5b9a\u4f4d + transform\uff1bblock + margin: 0 auto\uff1bflex<\/td>\ntext-align \u4f1a\u7ee7\u627f\uff1b\u8131\u79bb\u6587\u6863\u6d41\u65f6 margin auto \u5931\u6548<\/td>\n<\/tr>\n
\u5782\u76f4\u5c45\u4e2d<\/td>\n\u5b9a\u4f4d + transform\uff1btable-cell + vertical-align\uff1bflex\uff1b\u884c\u9ad8\u7b49\u4e8e\u9ad8<\/td>\nvertical-align \u4f1a\u7ee7\u627f\uff1btransform \u6709\u517c\u5bb9\u95ee\u9898<\/td>\n<\/tr>\n
\u6c34\u5e73\u5782\u76f4<\/td>\n\u5b9a\u4f4d + translate(-50%,-50%)\uff1btable-cell + margin auto\uff1bflex \u53cc center<\/td>\nFlex \u6700\u7701\uff0c\u4f46\u8981\u8003\u8651\u517c\u5bb9<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u4e00\u3001\u6c34\u5e73\u5c45\u4e2d<\/h2>\n

\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n

\"middle1\"<\/a><\/p>\n

\u65b9\u6848\u4e00. inline-block + text-align<\/h3>\n

display: inline-block<\/code> \u7684\u5143\u7d20\u5e26\u6709\u6587\u672c\u6027\u8d28\uff0c\u7236\u5143\u7d20\u53ef\u7528 text-align: center<\/code> \u505a\u884c\u5185\u6c34\u5e73\u5bf9\u9f50\u3002text-align<\/code> \u4f1a\u7ee7\u627f\uff0c\u5185\u90e8\u6587\u5b57\u4e5f\u4f1a\u5c45\u4e2d\uff0c\u9700\u8981\u81ea\u8eab\u518d\u8bbe\u4e00\u6b21\u8986\u76d6\u3002<\/p>\n

<style>\n    .wrap {\n        width: 100%;\n        height: 200px;\n        background-color: aqua;\n        text-align: center;\n    }\n    .content {\n        width: 200px;\n        height: 200px;\n        background-color: blueviolet;\n        display: inline-block;\n    }\n<\/style>\n<body>\n    <div class=\"wrap\">\n        <div class=\"content\"><\/div>\n    <\/div>\n<\/body><\/code><\/pre>\n
\u65b9\u6848\u4e8c. \u5b9a\u4f4d + transform<\/h3>\n
\u7236\u7ea7\u5f00\u5b9a\u4f4d\uff08relative \/ absolute \/ fixed \u5747\u53ef\uff09\uff0c\u5b50\u7ea7 absolute<\/code> \u540e left: 50%<\/code>\uff0c\u518d\u7528 transform: translateX(-50%)<\/code> \u56de\u9000\u81ea\u8eab\u5bbd\u5ea6\u7684 50%\u3002\u7236\u7ea7\u662f\u5426\u8131\u79bb\u6587\u6863\u6d41\u4e0d\u5f71\u54cd\u6c34\u5e73\u5c45\u4e2d\uff1btransform<\/code> \u662f CSS3\uff0c\u6709\u517c\u5bb9\u95ee\u9898\u3002<\/p>\n
<style>\n    .wrap {\n        position: relative;\n        width: 100%;\n        height: 200px;\n        background-color: aqua;\n    }\n    .content {\n        position: absolute;\n        left: 50%;\n        transform: translateX(-50%);\n        width: 200px;\n        height: 200px;\n        background-color: blueviolet;\n    }\n<\/style>\n<body>\n    <div class=\"wrap\">\n        <div class=\"content\"><\/div>\n    <\/div>\n<\/body><\/code><\/pre>\n
\u65b9\u6848\u4e09. display: block + margin: 0 auto<\/h3>\n
\u53ea\u6539\u5b50\u5143\u7d20\u5373\u53ef\u3002margin \u4e3a auto \u65f6\u6d4f\u89c8\u5668\u5de6\u53f3\u5747\u5206\u3002\u5b50\u5143\u7d20 display<\/code> \u8bbe\u4e3a block<\/code> \u6216 table<\/code> \u90fd\u884c\uff1b\u4e00\u65e6\u6d6e\u52a8\u6216\u5b9a\u4f4d\u8131\u79bb\u6587\u6863\u6d41\uff0cmargin \u503c\u4f1a\u5931\u6548\u3002<\/p>\n
<style>\n    .wrap {\n        width: 100%;\n        height: 200px;\n        background-color: aqua;\n    }\n    .content {\n        width: 200px;\n        height: 200px;\n        background-color: blueviolet;\n        display: table;\n        margin: 0 auto;\n    }\n<\/style>\n<body>\n    <div class=\"wrap\">\n        <div class=\"content\"><\/div>\n    <\/div>\n<\/body><\/code><\/pre>\n
\u65b9\u6848\u56db. Flex<\/h3>\n
<style>\n\/* flex *\/\n.wrap{\n    display: flex;\n    justify-content: center;\n}\n<\/style>\n<body>\n   <div class=\"wrap\">\n        <div class=\"content\"><\/div>\n    <\/div>\n<\/body><\/code><\/pre>\n
\u4e8c\u3001\u5782\u76f4\u5c45\u4e2d<\/h2>\n
\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n
\"vertifimiddle\"<\/a><\/p>\n
\u65b9\u6848\u4e00. \u5b9a\u4f4d + transform<\/h3>\n
\u548c\u6c34\u5e73\u65b9\u6848\u4e8c\u540c\u4e00\u601d\u8def\uff0c\u628a left \/ translateX \u6362\u6210 top \/ translateY\u3002<\/p>\n
<style>\n    .wrap {\n        position: relative;\n        width: 200px;\n        height: 600px;\n        background-color: aqua;\n    }\n    .content {\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        width: 200px;\n        height: 200px;\n        background-color: blueviolet;\n    }\n<\/style>\n<body>\n    <div class=\"wrap\">\n        <div class=\"content\"><\/div>\n    <\/div>\n<\/body><\/code><\/pre>\n
\u65b9\u6848\u4e8c. display: table-cell + vertical-align<\/h3>\n
display: table-cell<\/code> \u884c\u4e3a\u7c7b\u4f3c td\uff0c\u5b50\u5143\u7d20\u5e03\u5c40\u50cf\u6587\u672c\uff0c\u7236\u7ea7 vertical-align: middle<\/code> \u5373\u53ef\u5782\u76f4\u5c45\u4e2d\u3002\u8be5\u5c5e\u6027\u4f1a\u7ee7\u627f\uff0c\u7236\u7ea7\u5185\u6587\u672c\u4e5f\u4f1a\u5782\u76f4\u5c45\u4e2d\u3002<\/p>\n
<style>\n    .wrap {\n        display: table-cell;\n        vertical-align: middle;\n        width: 200px;\n        height: 600px;\n        background-color: aqua;\n    }\n    .content {\n        width: 200px;\n        height: 200px;\n        background-color: blueviolet;\n    }\n<\/style>\n<body>\n    <div class=\"wrap\">\n        <div class=\"content\"><\/div>\n    <\/div>\n<\/body><\/code><\/pre>\n
\u65b9\u6848\u4e09. Flex<\/h3>\n
<style>\n\/* flex *\/\n.wrap{\n    display: flex;\n    \/* flex-direction: column;\n    justify-content: center; *\/\n    align-items: center;\n}\n<\/style>\n<body>\n     <div class=\"wrap\">\n        <div class=\"content\"><\/div>\n    <\/div>\n<\/body><\/code><\/pre>\n
\u65b9\u6848\u56db. \u56fa\u5b9a\u9ad8\u5ea6\u7b49\u4e8e\u884c\u9ad8<\/h3>\n
content \u53ef\u4ee5\u662f\u884c\u5185\u6216\u5757\u7ea7\u5143\u7d20\u3002<\/p>\n
<style>\n\/* content \u53ef\u4ee5\u662f\u884c\u6216\u5757\u5143\u7d20 *\/\n.wrap{\n    height:300px;\n    line-height: 300px;\n}\n<\/style>\n<body>\n     <div class=\"wrap\">\n        <div class=\"content\"><\/div>\n    <\/div>\n<\/body><\/code><\/pre>\n
\u4e09\u3001\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d<\/h2>\n
\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n
\"middle2\"<\/a><\/p>\n
\u65b9\u6848\u4e00. \u5b9a\u4f4d + transform<\/h3>\n
<style>\n    .wrap {\n        position: relative;\n        width: 1200px;\n        height: 800px;\n        background-color: aqua;\n    }\n    .content {\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n        width: 200px;\n        height: 200px;\n        background-color: blueviolet;\n    }\n<\/style>\n<body>\n    <div class=\"wrap\">\n        <div class=\"content\"><\/div>\n    <\/div>\n<\/body><\/code><\/pre>\n
\u65b9\u6848\u4e8c. \u6c34\u5e73\u65b9\u6848\u4e09 + \u5782\u76f4\u65b9\u6848\u4e8c<\/h3>\n
<style>\n    .wrap {\n        display: table-cell;\n        vertical-align: middle;\n        width: 1200px;\n        height: 800px;\n        background-color: aqua;\n    }\n    .content {\n        margin: 0 auto;\n        width: 200px;\n        height: 200px;\n        background-color: blueviolet;\n    }\n<\/style>\n<body>\n    <div class=\"wrap\">\n        <div class=\"content\"><\/div>\n    <\/div>\n<\/body><\/code><\/pre>\n
\u56db\u3001\u7528 Flex \u4e00\u6b21\u505a\u5b8c<\/h2>\n
\u9ed8\u8ba4\u4ea4\u53c9\u8f74 align-items: center<\/code> \u5782\u76f4\u5c45\u4e2d\uff0c\u4e3b\u8f74 justify-content: center<\/code> \u6c34\u5e73\u5c45\u4e2d\u3002\u4ecd\u8981\u8003\u8651\u6d4f\u89c8\u5668\u517c\u5bb9\u3002<\/p>\n
 <style>\n     .wrap {\n         display: flex;\n         align-items: center;\n         justify-content: center;\n         width: 1200px;\n         height: 800px;\n         background-color: aqua;\n     }\n     .content {\n         width: 200px;\n         height: 200px;\n         background-color: blueviolet;\n     }\n <\/style>\n <body>\n     <div class=\"wrap\">\n         <div class=\"content\"><\/div>\n     <\/div>\n <\/body><\/code><\/pre>\n
\u539f\u6587: https:\/\/juejin.im\/post\/5e91a8a56fb9a03c9037928f#heading-12<\/p>\n
\n
\u4e00\u53e5\u8bdd\u603b\u7ed3\uff1a\u6c34\u5e73\u3001\u5782\u76f4\u3001\u6c34\u5e73\u5782\u76f4\u90fd\u53ef\u4ee5\u7528\u5b9a\u4f4d\u52a0 transform \u6216 Flex \u89e3\u51b3\uff1bmargin auto \u548c table-cell \u662f\u517c\u5bb9\u5907\u9009\uff0c\u8bb0\u4f4f\u7ee7\u627f\u548c\u8131\u79bb\u6587\u6863\u6d41\u4f1a\u8ba9\u90e8\u5206\u65b9\u6848\u5931\u6548\u3002<\/strong><\/p>\n<\/blockquote>\n<\/section>\n","protected":false},"excerpt":{"rendered":"
\u5c45\u4e2d\u662f CSS \u5e03\u5c40\u91cc\u6700\u5e38\u88ab\u95ee\u5230\u7684\u4e00\u5757\uff1a\u6c34\u5e73\u3001\u5782\u76f4\u3001\u6c34\u5e73\u5782\u76f4\u4e09\u5957\uff0c\u65b9\u6848\u4ece text-align\u3001margin: […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[109,105],"tags":[134,150],"_links":{"self":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2862"}],"collection":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2862"}],"version-history":[{"count":2,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2862\/revisions"}],"predecessor-version":[{"id":2867,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2862\/revisions\/2867"}],"wp:attachment":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}