Mapbox GL JS getBounds()/fitBounds()

Mapbox's own geojson-extent plugin will do the trick. Assuming your markers object is valid GeoJSON, you can simply pass it to the geojsonExtent() function to get a set of bounds that you can then pass to fitBounds().

Once you load the geojson-extent.js file (e.g., by using a <script> tag in your HTML code), you should be able to do this to fit your map to the bounds of your GeoJSON markers object:

map.fitBounds(geojsonExtent(markers));

UPDATE

GeoJSONLint reports that your markers object is not valid GeoJSON because the elements in each position are being interpreted as strings, not numbers. If you remove the quotes from the lon-lat coordinates, it should work fine:

var markers = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "title": "Site Gallery",
        "url": "\/Freelance\/art-sheffield-2016\/programme\/site-gallery\/",
        "summary": "Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Donec id justo. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Suspendisse feugiat. Etiam rhoncus.",
        "image": "\/Freelance\/art-sheffield-2016\/site\/assets\/files\/1032\/site_gallery.jpg",
        "marker-symbol": "venue-map-icon-blue",
        "colour": "blue"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.466439,
          53.376842
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Moore Street Substation",
        "url": "\/Freelance\/art-sheffield-2016\/programme\/moore-street-substation\/",
        "summary": "",
        "image": null,
        "marker-symbol": "venue-map-icon-green",
        "colour": "green"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.477881,
          53.374798
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "S1 Artspace",
        "url": "\/Freelance\/art-sheffield-2016\/programme\/s1-artspace\/",
        "summary": "",
        "image": null,
        "marker-symbol": "venue-map-icon-red",
        "colour": "red"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.459620,
          53.380562
        ]
      }
    }
  ]
};

This is my solution based on the reduce operation from a Mapbox example.

It works for geojson that contain point features and multi-point features like lines.

let bounds = geoJSON.features.reduce(function(bounds, feature) {
  if(!Array.isArray(feature.geometry.coordinates[0])) { // point feature
    return bounds.extend(feature.geometry.coordinates);
  } else {
    return feature.geometry.coordinates.reduce(function(bounds, coord) {
      return bounds.extend(coord);
    }, bounds);
  }
}, new mapboxgl.LngLatBounds());

map.fitBounds(bounds, {
  maxZoom: 12,
  padding: 30, // in px, to make markers on the top edge visible
})

If you want to fit map to markers, you can create bounds that contains all markers.

var bounds = new mapboxgl.LngLatBounds();

markers.features.forEach(function(feature) {
    bounds.extend(feature.geometry.coordinates);
});

map.fitBounds(bounds);

For a solution that will work for all GeoJSON objects, not just a set of markers, check out Mapbox's Turf.js.

This code was very helpful to me: https://bl.ocks.org/danswick/83a8ddff7fb9193176a975a02a896792

But just to repeat the basics in case that link dies:

var bounds = turf.bbox(markers);
map.fitBounds(bounds, {padding: 20});

The extent method mentioned in the linked code has been deprecated in favour of bbox, but the result is the same.